/* ==========================================================================
   Sa Cova Santanyí — Gestaltung 2026
   Gelbe Farbtextur bildschirmfüllend und fest, darüber Karten aus Milchglas.
   Alles unter .sc-page gekapselt, damit MDB und Bootstrap unberührt bleiben.
   Schriften liegen lokal im Theme, es wird nichts von fremden Servern geholt.
   ========================================================================== */

/* ------------------------------------------------------------------ Reset
   Das neue Layout laedt bewusst kein Bootstrap und kein normalize.css, also
   steht hier das Wenige, was ohne sie fehlt. */

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

body.sc-body { margin: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.sc-body img,
.sc-body svg { max-width: 100%; }

.sc-body img { height: auto; }

/* Links erben die Textfarbe. Achtung: diese Regel hat 0-1-1 und schlaegt jede
   reine Klassenregel (0-1-0). Farbige Schaltflaechen brauchen deshalb
   ".sc-body a.klasse", sonst laufen sie still auf die Erbfarbe zurueck. */
.sc-body a { color: inherit; }

.sc-body ul { list-style: none; }

.sc-body blockquote,
.sc-body figure { margin: 0; }

/* --------------------------------------------------------------- Schriften */

@font-face {
    font-family: 'Podkova';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../font/freud/podkova-extrabold-webfont.woff2') format('woff2'),
         url('../font/freud/podkova-extrabold-webfont.woff') format('woff');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../font/rubik/rubik-v8-latin-regular.woff2') format('woff2'),
         url('../font/rubik/rubik-v8-latin-regular.woff') format('woff');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../font/rubik/rubik-v8-latin-500.woff2') format('woff2'),
         url('../font/rubik/rubik-v8-latin-500.woff') format('woff');
}

@font-face {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../font/rubik/rubik-v8-latin-700.woff2') format('woff2'),
         url('../font/rubik/rubik-v8-latin-700.woff') format('woff');
}

/* ----------------------------------------------------------------- Palette */

/* Bewusst auf :root, denn Kopfleiste und Fußzeile liegen ausserhalb .sc-page
   und haetten die Werte sonst nicht. */
:root {
    --sc-tinte:       #241705;   /* Fließtext und Überschriften */
    --sc-tinte-leise: #4A3418;   /* Beschreibungen */
    --sc-rot:         #8A1109;   /* Preise, aktive Zustände, Marke */
    --sc-rot-hell:    #B8241A;
    --sc-glas:        rgba(255, 255, 255, .68);
    --sc-glas-dicht:  rgba(255, 255, 255, .82);
    --sc-glas-rand:   rgba(255, 255, 255, .85);
    --sc-glas-linie:  rgba(36, 23, 5, .14);
    --sc-schatten:    0 18px 50px -20px rgba(58, 32, 0, .45);
    --sc-radius:      18px;
    --sc-kopf:        76px;      /* Höhe der festen Kopfleiste */
}

/* ------------------------------------------------- Untergrund und Atmosphäre */

body.sc-body {
    background: #F2B705;
    color: var(--sc-tinte);
    font-family: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
}

/* Die Farbtextur liegt fest hinter allem. Ein eigenes Element statt
   background-attachment: fixed, weil iOS das seit jeher ignoriert. */
.sc-grund {
    position: fixed;
    inset: 0;
    z-index: -2;
    /* JPEG zuerst als Rueckfall, danach WebP fuer alle, die es koennen. */
    background-image: url('../img/client/bg.jpg');
    background-image: -webkit-image-set(
        url('../img/client/bg.webp') type('image/webp'),
        url('../img/client/bg.jpg') type('image/jpeg'));
    background-image: image-set(
        url('../img/client/bg.webp') type('image/webp'),
        url('../img/client/bg.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1.04);
}

/* Körnung und warme Randabdunklung: nimmt der Fläche das Digitale und
   hält die Ränder ruhig, damit Glaskarten sich klar abheben. */
.sc-grund::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(120% 90% at 50% 40%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(140% 120% at 50% 50%, rgba(120, 60, 0, 0) 45%, rgba(120, 60, 0, .34) 100%),
        url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    opacity: .9;
}

/* -------------------------------------------------------------- Typografie */

.sc-page h1,
.sc-page h2,
.sc-page h3,
.sc-page .sc-display {
    font-family: 'Podkova', Georgia, 'Times New Roman', serif;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.12;
    color: var(--sc-tinte);
    margin: 0;
}

.sc-page h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); }
.sc-page h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
.sc-page h3 { font-size: clamp(1.25rem, 2.6vw, 1.75rem); }

.sc-page p { margin: 0 0 1.1em; }
.sc-page p:last-child { margin-bottom: 0; }

.sc-vorwort {
    font-family: 'Podkova', Georgia, serif;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--sc-rot);
    margin: 0 0 .9rem;
}

/* ------------------------------------------------------------------- Glas */

.sc-glas {
    position: relative;
    background: var(--sc-glas);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid var(--sc-glas-rand);
    border-radius: var(--sc-radius);
    /* Reihenfolge: warme Aussenkante fuer die Sichtbarkeit der Karte auf dem
       Gelb, danach der weiche Schlagschatten, zuletzt der weisse Glanz innen. */
    box-shadow:
        0 0 0 1px rgba(90, 58, 8, .70),
        var(--sc-schatten),
        inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* Browser ohne backdrop-filter bekommen dichteres Weiß, sonst wäre der
   Text auf der Farbtextur nicht mehr sicher lesbar. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .sc-glas { background: var(--sc-glas-dicht); }
}

/* ------------------------------------------------------------------ Kopf */

.sc-kopf {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: var(--sc-kopf);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .80);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border-bottom: 1px solid var(--sc-glas-linie);
}

.sc-kopf__innen {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 18px;
}

.sc-marke {
    font-family: 'Podkova', Georgia, serif;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -.02em;
    color: var(--sc-tinte);
    text-decoration: none;
    margin-right: auto;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.sc-marke picture,
.sc-marke img {
    display: block;
    height: 46px;
    width: auto;
}

@media (max-width: 600px) {
    .sc-marke img { height: 36px; }
}

.sc-marke:hover,
.sc-marke:focus { color: var(--sc-rot); text-decoration: none; }

.sc-marke em { font-style: normal; color: var(--sc-rot); }

.sc-sprachen { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }

.sc-sprachen a {
    display: block;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sc-tinte-leise);
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.sc-sprachen a:hover { background: rgba(255, 255, 255, .8); color: var(--sc-tinte); text-decoration: none; }
.sc-sprachen a.ist-aktiv { background: var(--sc-rot); color: #fff; }

.sc-body a.sc-kopf__tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--sc-rot);
    color: #fff;
    font-weight: 500;
    font-size: .92rem;
    text-decoration: none;
    box-shadow: 0 8px 20px -8px rgba(138, 17, 9, .8);
    transition: transform .18s ease, background .18s ease;
}

.sc-body a.sc-kopf__tel:hover,
.sc-body a.sc-kopf__tel:focus { background: var(--sc-rot-hell); color: #fff; text-decoration: none; transform: translateY(-2px); }

@media (max-width: 600px) {
    .sc-kopf__tel span { display: none; }
    .sc-kopf__tel { padding: 9px 13px; }
    .sc-marke { font-size: 1.25rem; }
}

/* ---------------------------------------------------------------- Gerüst */

.sc-page { padding-top: var(--sc-kopf); }

.sc-bahn {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 20px;
}

.sc-abschnitt { padding: clamp(3rem, 8vw, 6rem) 0; }

/* ------------------------------------------------------------------ Hero */

.sc-hero {
    min-height: calc(100vh - var(--sc-kopf));
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 0 4rem;
}

.sc-hero__bild {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sc-radius);
    box-shadow: var(--sc-schatten);
    transform: rotate(-1.1deg);
}

.sc-hero__karte {
    margin-top: -3.2rem;
    margin-left: auto;
    margin-right: auto;
    max-width: 760px;
    padding: clamp(1.6rem, 4vw, 2.6rem);
    text-align: center;
}

.sc-hero__karte h1 { margin-bottom: .6rem; }

.sc-hero__unter {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: var(--sc-tinte-leise);
    margin: 0;
}

.sc-hero__pfeil {
    display: block;
    width: 42px;
    height: 42px;
    margin: 2.2rem auto 0;
    border: 2px solid var(--sc-tinte);
    border-radius: 50%;
    color: var(--sc-tinte);
    text-align: center;
    line-height: 38px;
    font-size: 1.1rem;
    text-decoration: none;
    animation: sc-wippen 2.4s ease-in-out infinite;
}

.sc-hero__pfeil:hover { background: var(--sc-tinte); color: #F2B705; text-decoration: none; }

@keyframes sc-wippen {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(7px); }
}

/* ----------------------------------------------------------------- Intro */

.sc-intro { max-width: 780px; margin: 0 auto; padding: clamp(1.8rem, 4vw, 3rem); }
.sc-intro p { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--sc-tinte-leise); }
.sc-intro p:first-of-type { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--sc-tinte); }

/* ------------------------------------------------------------- Das Zitat */

.sc-zitat {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(1.6rem, 4vw, 2.6rem);
}

.sc-zitat__bild {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 14px 30px -14px rgba(58, 32, 0, .6);
    transform: rotate(-2deg);
}

.sc-zitat__quelle {
    display: block;
    margin-top: .6rem;
    font-size: .72rem;
    color: var(--sc-tinte-leise);
    text-align: center;
}

.sc-zitat blockquote {
    font-family: 'Podkova', Georgia, serif;
    font-weight: 800;
    font-size: clamp(1.15rem, 2.6vw, 1.6rem);
    line-height: 1.34;
    color: var(--sc-tinte);
    margin: 0;
    border: 0;
    padding: 0;
}

.sc-zitat blockquote span { color: var(--sc-rot); }

.sc-zitat figcaption {
    margin-top: 1rem;
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--sc-tinte-leise);
}

@media (max-width: 720px) {
    .sc-zitat { grid-template-columns: 1fr; text-align: center; }
    .sc-zitat__bild { max-width: 210px; margin: 0 auto; }
}

/* ------------------------------------------------------- Karten-Steuerung */

.sc-reiter {
    position: sticky;
    background: rgba(255, 255, 255, .90);
    top: var(--sc-kopf);
    z-index: 900;
    margin: 0 0 2.4rem;
    padding: 12px;
    border-radius: 999px;
}

.sc-reiter__spur {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}

.sc-reiter__spur::-webkit-scrollbar { display: none; }

.sc-reiter a {
    flex: 0 0 auto;
    padding: 8px 17px;
    border-radius: 999px;
    font-size: .88rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--sc-tinte-leise);
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}

.sc-reiter a:hover { background: rgba(255, 255, 255, .85); color: var(--sc-tinte); text-decoration: none; }
.sc-reiter a.ist-aktiv { background: var(--sc-rot); color: #fff; }

/* Trennt Speisen von Getränken in der durchlaufenden Spur. */
.sc-reiter__marke {
    flex: 0 0 auto;
    align-self: center;
    padding: 0 14px 0 8px;
    border-left: 2px solid var(--sc-glas-linie);
    font-family: 'Podkova', Georgia, serif;
    font-weight: 800;
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--sc-rot);
    white-space: nowrap;
}

.sc-reiter__marke:first-child { border-left: 0; padding-left: 6px; }

/* ----------------------------------------------------------- Speisekarte */

.sc-oberkat {
    margin-bottom: clamp(2.5rem, 6vw, 4rem);
    scroll-margin-top: calc(var(--sc-kopf) + 20px);
}

.sc-oberkat__kopf { text-align: center; margin-bottom: 2.4rem; }

.sc-oberkat__kopf h2 { position: relative; display: inline-block; padding-bottom: .5rem; }

.sc-oberkat__einleitung {
    max-width: 620px;
    margin: 1.1rem auto 0;
    font-size: .95rem;
    line-height: 1.55;
    color: var(--sc-tinte-leise);
}

.sc-oberkat__kopf h2::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 0;
    height: 4px;
    border-radius: 2px;
    background: var(--sc-rot);
}

.sc-gruppe {
    padding: clamp(1.4rem, 3.4vw, 2.4rem);
    margin-bottom: 1.6rem;
    scroll-margin-top: calc(var(--sc-kopf) + 80px);
}

.sc-gruppe__kopf {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    padding-bottom: .9rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid var(--sc-glas-linie);
}

.sc-gruppe__zusatz {
    font-size: .85rem;
    font-weight: 500;
    color: var(--sc-rot);
}

.sc-gruppe__hinweis {
    margin-top: 1.2rem;
    padding: .8rem 1rem;
    border-radius: 12px;
    background: rgba(138, 17, 9, .09);
    font-size: .88rem;
    color: var(--sc-tinte-leise);
}

/* Zwei Spalten, sobald Platz ist. Speisen mit Beschreibung brauchen mehr
   Breite als eine Getränkeliste, deshalb der Unterschied. */
.sc-speisen { display: grid; gap: .2rem 2.6rem; }

@media (min-width: 900px) {
    .sc-gruppe[data-art="list"] .sc-speisen  { grid-template-columns: 1fr 1fr; }
    .sc-gruppe[data-art="wine"] .sc-speisen  { grid-template-columns: 1fr 1fr; }
}

.sc-speise {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0 .8rem;
    padding: .5rem 0;
    border-bottom: 1px dotted rgba(36, 23, 5, .22);
}

.sc-speise:last-child { border-bottom: 0; }

.sc-speise__name {
    font-family: 'Rubik', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--sc-tinte);
    margin: 0;
    line-height: 1.35;
}

.sc-speise__preis {
    font-family: 'Podkova', Georgia, serif;
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--sc-rot);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.sc-speise__text {
    grid-column: 1 / -1;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--sc-tinte-leise);
    margin: .15rem 0 0;
}

.sc-speise__mehr {
    grid-column: 1 / -1;
    font-size: .8rem;
    color: var(--sc-tinte-leise);
    margin: .3rem 0 0;
}

.sc-marke-abz {
    display: inline-block;
    margin-left: .45rem;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--sc-rot);
    color: #fff;
    font-family: 'Rubik', sans-serif;
    font-size: .66rem;
    font-weight: 500;
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ------------------------------------------------------------ Reservierung */

.sc-reservierung { max-width: 700px; margin: 0 auto; padding: clamp(2rem, 5vw, 3.2rem); text-align: center; }

.sc-body a.sc-reservierung__nummer {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 1.4rem;
    padding: 15px 32px;
    border-radius: 999px;
    background: var(--sc-rot);
    color: #fff;
    font-family: 'Podkova', Georgia, serif;
    font-weight: 800;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    text-decoration: none;
    box-shadow: 0 14px 34px -14px rgba(138, 17, 9, .9);
    transition: transform .18s ease, background .18s ease;
}

.sc-body a.sc-reservierung__nummer:hover,
.sc-body a.sc-reservierung__nummer:focus { background: var(--sc-rot-hell); color: #fff; text-decoration: none; transform: translateY(-3px); }

.sc-oeffnung {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6rem 2rem;
    margin-top: 1.8rem;
    font-size: .92rem;
    color: var(--sc-tinte-leise);
}

/* ------------------------------------------------------------------ Fuß */

.sc-fuss {
    padding: 2.6rem 0;
    background: rgba(36, 23, 5, .86);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, .82);
    font-size: .9rem;
}

.sc-fuss a { color: #FFD34E; text-decoration: none; }
.sc-fuss a:hover { color: #fff; text-decoration: underline; }

.sc-fuss__reihe {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/* --------------------------------------------------------- Einblenden */

.sc-auf {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
    will-change: opacity, transform;
}

.sc-auf.ist-da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .sc-auf { opacity: 1; transform: none; transition: none; }
    .sc-hero__pfeil { animation: none; }
    .sc-reiter__spur { scroll-behavior: auto; }
}

/* -------------------------------------------------- Bestand ruhigstellen */

.sc-body .navbar,
.sc-body #preloader,
.sc-body .preloader-bg,
.sc-body .page-footer { display: none !important; }