:root {
--overview-bg-top: rgba(4, 4, 4, 0.56);
--overview-bg-bottom: rgba(4, 4, 4, 0.84);
--gelenau-card-overlay-top: rgba(28, 14, 5, 0.78);
--gelenau-card-overlay-bottom: rgba(5, 3, 1, 0.90);
--auerbach-card-overlay-top: rgba(5, 7, 8, 0.84);
--auerbach-card-overlay-bottom: rgba(1, 2, 2, 0.93);
--trattoria-card-overlay-top: rgba(8, 8, 8, 0.78);
--trattoria-card-overlay-bottom: rgba(2, 2, 2, 0.91);
--gold: #e3bb4e;
--gold-line: #d9aa30;
--text: #d6c7a7;
--muted: #b8ae99;
}
* {
box-sizing: border-box;
}
html,
body {
min-height: 100%;
}
body {
margin: 0;
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
overflow-x: hidden;
font-family: Arial, Helvetica, sans-serif;
color: var(--text);
background:
linear-gradient(var(--overview-bg-top), var(--overview-bg-bottom)),
url("/texture/background") center center / cover fixed;
}
a {
color: inherit;
}
.page {
width: 100%;
min-height: 100vh;
min-height: 100svh;
min-height: 100dvh;
display: flex;
flex-direction: column;
container-type: inline-size;
container-name: toros-overview;
}
.hero,
.locations,
.overview-visitor-counter {
flex: 0 0 auto;
}
.hero {
text-align: center;
padding: clamp(0.25rem, 1dvh, 0.875rem) 1.25rem clamp(0.2rem, 0.6dvh, 0.5rem);
}
.hero-logo-link {
display: inline-block;
border-radius: 50%;
line-height: 0;
cursor: pointer;
transition: transform 220ms ease, filter 220ms ease;
}
.hero-logo-link:hover {
transform: translateY(-0.25rem);
filter: drop-shadow(0 0.5rem 0.875rem rgba(227, 199, 103, 0.24));
}
.hero-logo-link:focus-visible {
outline: 0.1875rem solid #e3c767;
outline-offset: 0.3125rem;
}
.hero-logo, .restaurant-logo {
display: block;
width: clamp(11rem, min(34vw, 25dvh), 22.5rem);
max-width: 100%;
height: auto;
margin: 0 auto clamp(0.0625rem, 0.4dvh, 0.3125rem);
filter: drop-shadow(0 0.75rem 2rem rgba(0, 0, 0, 0.78));
}
.hero-divider {
position: relative;
width: clamp(6.5rem, 10vw, 7.8125rem);
height: 1px;
margin: 0 auto;
background: linear-gradient(90deg, transparent, rgba(220, 175, 49, 0.85), transparent);
}
.hero-divider::after,
.gold-line::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 0.375rem;
height: 0.375rem;
background: var(--gold-line);
transform: translate(-50%, -50%) rotate(45deg);
}
.locations {
width: min(90.625rem, calc(100% - 1.75rem));
margin: clamp(0.25rem, 0.6dvh, 0.5rem) auto clamp(0.3125rem, 0.8dvh, 0.625rem);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
align-items: stretch;
gap: clamp(0.75rem, 1.45vw, 1.375rem);
}
.location-card {
position: relative;
min-width: 0;
min-height: 0;
max-height: none;
overflow: hidden;
cursor: pointer;
border: 1px solid rgba(210, 166, 43, 0.52);
border-radius: 0.1875rem;
background: linear-gradient(150deg, rgba(20, 19, 16, 0.96), rgba(5, 5, 5, 0.97));
box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.40);
transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
--card-inline: 22rem;
--card-block: 18rem;
--card-text-scale: 1;
--card-v-scale: 1;
container-type: inline-size;
container-name: toros-location-card;
}
.location-card:hover {
transform: translateY(-0.25rem);
border-color: rgba(230, 188, 62, 0.90);
box-shadow: 0 1.375rem 3rem rgba(0, 0, 0, 0.55);
}
.location-card::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at 50% 10%, rgba(218, 176, 52, 0.065), transparent 43%);
}
.location-card-gelenau,
.location-card-auerbach,
.location-card-trattoria {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.location-card-gelenau {
background-image:
linear-gradient(150deg, var(--gelenau-card-overlay-top), var(--gelenau-card-overlay-bottom)),
url("/texture/gelenau");
}
.location-card-auerbach {
background-image:
linear-gradient(150deg, var(--auerbach-card-overlay-top), var(--auerbach-card-overlay-bottom)),
url("/texture/auerbach");
}
.location-card-trattoria,
.location-card-closed.location-card-trattoria {
background-image:
linear-gradient(150deg, var(--trattoria-card-overlay-top), var(--trattoria-card-overlay-bottom)),
url("/texture/restaurant");
}
.location-card-announcement {
border-color: rgba(233, 193, 81, 0.82);
box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.5), 0 0 1.15rem rgba(222, 176, 52, 0.28);
animation: overviewAnnouncementPulse 2.8s ease-in-out infinite;
}
.location-card-announcement::after {
content: "";
position: absolute;
inset: -35%;
pointer-events: none;
background: linear-gradient(108deg, transparent 28%, rgba(255, 236, 170, 0.08) 45%, rgba(255, 223, 120, 0.34) 50%, rgba(255, 236, 170, 0.08) 55%, transparent 72%);
transform: translateX(-120%) rotate(10deg);
opacity: 0.92;
animation: overviewAnnouncementShine 4.2s ease-in-out infinite;
}
.location-card-announcement .closed-badge {
padding-inline: 0.9rem;
background: rgba(214, 165, 47, 0.16);
border: 1px solid rgba(241, 205, 101, 0.56);
box-shadow: 0 0 0.95rem rgba(220, 175, 49, 0.22);
animation: overviewAnnouncementBadge 2.15s ease-in-out infinite;
}
.location-card-announcement .reopening-text {
color: #f0cf73;
text-shadow: 0 0 0.65rem rgba(240, 207, 115, 0.28);
animation: overviewAnnouncementText 2.4s ease-in-out infinite;
}
.location-card-announcement .closed-description {
color: #f2e6c8;
}
.location-card-announcement .location-button-reopening {
color: #f5d57f;
text-shadow: 0 0 0.45rem rgba(245, 213, 127, 0.24);
animation: overviewAnnouncementButton 2.3s ease-in-out infinite;
}
.location-card-announcement .location-button-reopening .button-status-dot {
background: #f0c34e;
box-shadow: 0 0 0.7rem rgba(240, 195, 78, 0.82);
}
@keyframes overviewAnnouncementPulse {
0%,
100% {
border-color: rgba(233, 193, 81, 0.72);
box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, 0.5), 0 0 1rem rgba(222, 176, 52, 0.22);
}
50% {
border-color: rgba(255, 222, 123, 0.98);
box-shadow: 0 1.35rem 3rem rgba(0, 0, 0, 0.56), 0 0 1.65rem rgba(237, 195, 80, 0.42);
}
}
@keyframes overviewAnnouncementShine {
0%,
52% {
transform: translateX(-120%) rotate(10deg);
opacity: 0;
}
64% {
opacity: 0.92;
}
100% {
transform: translateX(120%) rotate(10deg);
opacity: 0;
}
}
@keyframes overviewAnnouncementBadge {
0%,
100% {
transform: scale(1);
box-shadow: 0 0 0.8rem rgba(220, 175, 49, 0.18);
}
50% {
transform: scale(1.03);
box-shadow: 0 0 1.2rem rgba(244, 201, 92, 0.34);
}
}
@keyframes overviewAnnouncementText {
0%,
100% {
opacity: 0.96;
transform: translateY(0);
}
50% {
opacity: 1;
transform: translateY(-0.08rem);
}
}
@keyframes overviewAnnouncementButton {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.018);
}
}
.location-content {
position: relative;
z-index: 1;
height: 100%;
padding: clamp(0.6875rem, 1.45dvh, 1.25rem) 1.125rem clamp(0.625rem, 1.25dvh, 1.125rem);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.location-content h2 {
margin: 0 0 0.25rem;
font-family: Georgia, "Times New Roman", serif;
font-weight: normal;
font-size: 2rem;
line-height: 1.06;
color: var(--gold);
text-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.8);
}
.gold-line {
position: relative;
width: 5.125rem;
height: 1px;
margin: 0 auto clamp(0.35rem, 0.7dvh, 0.75rem);
background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}
.location-info {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(0.125rem, 0.3dvh, 0.4375rem);
}
.phone {
display: inline-block;
color: #e5c76e;
text-decoration: none;
font-family: Georgia, "Times New Roman", serif;
font-size: 1rem;
line-height: 1.18;
transition: color 0.2s ease, transform 0.2s ease;
}
.phone:hover {
color: #ffe18c;
transform: translateY(-1px);
}
.address {
margin: 0;
color: #d1c3a6;
font-size: 0.82rem;
line-height: 1.24;
white-space: normal;
text-wrap: balance;
}
.opening-times {
width: 100%;
max-width: 21.875rem;
margin: clamp(0.375rem, 0.8dvh, 0.75rem) auto;
padding: clamp(0.3125rem, 0.65dvh, 0.5625rem) 0;
border-top: 1px solid rgba(209, 170, 57, 0.20);
border-bottom: 1px solid rgba(209, 170, 57, 0.20);
}
.opening-title {
margin-bottom: clamp(0.1875rem, 0.45dvh, 0.5625rem);
color: #c3a653;
font-size: 0.69rem;
text-transform: uppercase;
letter-spacing: 0.15em;
}
.opening-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem;
padding: clamp(0.0625rem, 0.22dvh, 0.1875rem) 0.3125rem;
font-size: 0.82rem;
line-height: 1.18;
}
.opening-day {
min-width: 0;
color: #cabfa8;
text-align: left;
}
.opening-time {
color: #ddceab;
text-align: right;
white-space: nowrap;
}
.opening-closed {
color: #b8a771;
font-style: italic;
}
.location-button,
.location-button.is-open,
.location-button.is-closed,
.location-button-reopening {
width: 100%;
max-width: 22.1875rem;
min-height: 1.625rem;
margin-top: auto;
padding: 0.0625rem 0.4375rem;
display: grid;
grid-template-columns: 0.875rem 1fr 1.25rem;
align-items: center;
gap: 0.375rem;
border: 0;
border-radius: 0.1875rem;
color: #d9bb63;
background: transparent;
box-shadow: none;
text-decoration: none;
transition: transform 0.2s ease;
}
.location-button:hover,
.location-button.is-open:hover,
.location-button.is-closed:hover,
.location-button-reopening:hover {
color: #ffe496;
background: transparent;
box-shadow: none;
transform: translateY(-1px);
}
.button-status-dot {
width: 0.4375rem;
height: 0.4375rem;
border-radius: 50%;
justify-self: center;
background: #9f8c5c;
box-shadow: 0 0 0.4375rem rgba(159, 140, 92, 0.55);
}
.button-label {
text-align: center;
font-size: 0.82rem;
font-weight: 600;
line-height: 1.08;
letter-spacing: 0.02em;
}
.button-arrow {
justify-self: end;
font-size: 1.15rem;
line-height: 1;
transition: transform 0.2s ease;
}
.location-button:hover .button-arrow {
transform: translateX(0.25rem);
}
.location-button.is-open {
color: #cce89b;
}
.location-button.is-open .button-status-dot {
background: #86c447;
box-shadow: 0 0 0.625rem rgba(134, 196, 71, 0.82);
}
.location-button.is-open:hover {
color: #e2ffc1;
}
.location-button.is-closed {
color: #d5bd79;
}
.location-button.is-closed .button-status-dot {
background: #b28f45;
box-shadow: 0 0 0.5rem rgba(178, 143, 69, 0.62);
}
.location-card-closed {
background: linear-gradient(150deg, rgba(17, 16, 14, 0.97), rgba(4, 4, 4, 0.98));
}
.closed-badge {
margin: clamp(0.25rem, 0.55dvh, 0.5rem) auto clamp(0.125rem, 0.3dvh, 0.3125rem);
padding: 0.1875rem 0.6875rem;
border: 1px solid rgba(221, 174, 45, 0.48);
border-radius: 1.25rem;
color: #ddb752;
background: rgba(201, 153, 30, 0.07);
font-size: 0.70rem;
font-weight: bold;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.reopening-text {
margin: 0.125rem 0 clamp(0.1875rem, 0.45dvh, 0.375rem);
color: #dec46f;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.05rem;
line-height: 1.16;
}
.closed-description {
max-width: 28.75rem;
margin: 0 auto clamp(0.25rem, 0.55dvh, 0.5rem);
color: var(--muted);
font-size: 0.80rem;
line-height: 1.28;
}
.location-button-reopening {
color: #d8b456;
}
.location-button-reopening .button-status-dot {
background: #d3a537;
box-shadow: 0 0 0.5625rem rgba(211, 165, 55, 0.65);
}
.overview-visitor-counter {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.3125rem;
margin: 0 auto;
padding: clamp(0.125rem, 0.35dvh, 0.375rem) 0.625rem;
color: rgba(255, 255, 255, 0.78);
font-size: 0.78rem;
line-height: 1.15;
letter-spacing: 0.02em;
}
.overview-visitor-counter strong {
color: #e9c875;
font-weight: 700;
}
.overview-visitor-total-label {
margin-left: 0.4375rem;
}
.sr-only {
position: absolute ;
width: 1px ;
height: 1px ;
padding: 0 ;
margin: -1px ;
overflow: hidden ;
clip: rect(0, 0, 0, 0) ;
white-space: nowrap ;
border: 0 ;
}
.location-button:focus-visible,
.phone:focus-visible {
outline: 0.1875rem solid currentColor;
outline-offset: 0.25rem;
}
.toros-splash {
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100vw;
height: 100vh;
width: 100dvw;
height: 100dvh;
display: grid;
place-items: center;
overflow: hidden;
background: transparent;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.toros-splash-backdrop {
position: absolute;
inset: 0;
z-index: -1;
background: #050504;
opacity: 1;
will-change: opacity;
}
.toros-splash-logo {
position: fixed;
left: var(--toros-splash-center-x, 50vw);
top: var(--toros-splash-center-y, 50vh);
width: clamp(13.125rem, 28vw, 25rem);
height: auto;
transform-origin: 50% 50%;
transform: translate3d(-50%, -50%, 0) scale(0.035);
opacity: 0;
backface-visibility: hidden;
will-change: transform, opacity;
pointer-events: none;
user-select: none;
}
body.toros-splash-active {
overflow: hidden;
}
body.toros-splash-active .page,
.page {
opacity: 1;
transform: none;
}
body.toros-splash-running .toros-splash-logo {
animation:
torosLogoApproach 2.65s cubic-bezier(0.42, 0, 0.92, 0.46) forwards,
torosLogoVisibility 2.65s linear forwards;
}
body.toros-splash-running .toros-splash-backdrop {
animation: torosBackdropContinuousReveal 2.65s linear forwards;
}
@keyframes torosLogoApproach {
from { transform: translate3d(-50%, -50%, 0) scale(0.035); }
to { transform: translate3d(-50%, -50%, 0) scale(10); }
}
@keyframes torosLogoVisibility {
0% { opacity: 0; }
7% { opacity: 0.78; }
16% { opacity: 1; }
86% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes torosBackdropContinuousReveal {
0% { opacity: 1; }
72% { opacity: 1; }
100% { opacity: 0; }
}
body.toros-card-sequence-pending {
overflow-x: hidden;
}
body.toros-card-sequence-pending .location-card {
pointer-events: none;
}
@container toros-location-card (max-width: 30rem) {
.location-content {
padding: clamp(0.55rem, 3cqi, 0.8rem) clamp(0.7rem, 3.4cqi, 1rem)
clamp(0.45rem, 2.4cqi, 0.7rem);
}
.location-content h2 {
margin-bottom: 0.125rem;
font-size: clamp(1.45rem, 6.2cqi, 1.95rem);
line-height: 1.04;
}
.gold-line {
width: clamp(3.75rem, 16cqi, 5.125rem);
margin-bottom: clamp(0.25rem, 1.6cqi, 0.45rem);
}
.location-info {
gap: clamp(0.0625rem, 0.6cqi, 0.2rem);
}
.phone {
font-size: clamp(0.82rem, 3.5cqi, 0.96rem);
line-height: 1.12;
}
.address {
font-size: clamp(0.68rem, 2.9cqi, 0.8rem);
line-height: 1.2;
}
.opening-title {
display: none;
}
.opening-times {
margin: clamp(0.2rem, 1.1cqi, 0.35rem) auto;
padding: clamp(0.0625rem, 0.45cqi, 0.2rem) 0;
}
.opening-row {
gap: clamp(0.3rem, 1.6cqi, 0.55rem);
padding: 0 clamp(0.125rem, 0.8cqi, 0.25rem);
font-size: clamp(0.68rem, 2.9cqi, 0.8rem);
line-height: 1.08;
}
.opening-day,
.opening-time {
white-space: nowrap;
}
.location-button,
.location-button.is-open,
.location-button.is-closed,
.location-button-reopening {
min-height: clamp(1.125rem, 5.2cqi, 1.625rem);
padding: 0 clamp(0.1875rem, 1.2cqi, 0.4375rem);
gap: clamp(0.1875rem, 1cqi, 0.375rem);
}
.button-label {
font-size: clamp(0.625rem, 2.7cqi, 0.78rem);
line-height: 1.02;
}
.button-status-dot {
width: clamp(0.3125rem, 1.4cqi, 0.4375rem);
height: clamp(0.3125rem, 1.4cqi, 0.4375rem);
}
.button-arrow {
font-size: clamp(0.75rem, 3.4cqi, 1.05rem);
}
.location-card-trattoria .location-button-reopening {
display: none;
}
.location-card-trattoria .closed-badge {
margin: 0.25rem auto 0;
padding: 0.1875rem 0.625rem;
font-size: clamp(0.625rem, 2.6cqi, 0.7rem);
}
.location-card-trattoria .reopening-text {
margin: 0.125rem 0 0;
font-size: clamp(0.9rem, 3.8cqi, 1.05rem);
}
}
@container toros-location-card (max-width: 275px) {
.location-content {
padding-inline: 0.625rem;
}
.location-content h2 {
font-size: clamp(1.42rem, 11cqi, 1.75rem);
}
.gold-line {
width: 3.875rem;
}
.location-info {
gap: 0.1875rem;
}
.phone {
font-size: clamp(0.76rem, 5.8cqi, 0.90rem);
}
.address {
font-size: clamp(0.64rem, 4.8cqi, 0.76rem);
}
.opening-times {
max-width: none;
}
.opening-row {
gap: 0.375rem;
padding-inline: 0.125rem;
font-size: clamp(0.66rem, 5.1cqi, 0.78rem);
}
.opening-day,
.opening-time {
white-space: nowrap;
}
.location-button {
gap: 0.3125rem;
padding-inline: 0.375rem;
}
.button-label {
font-size: clamp(0.66rem, 4.9cqi, 0.76rem);
}
}
@container toros-location-card (min-width: 17.25rem) and (max-width: 30rem) {
.location-content {
padding-inline: clamp(0.75rem, 5cqi, 1.125rem);
}
.location-content h2 {
font-size: clamp(1.65rem, 8cqi, 2rem);
}
.phone {
font-size: clamp(0.86rem, 4.3cqi, 1rem);
}
.address {
font-size: clamp(0.70rem, 3.6cqi, 0.82rem);
}
.opening-row {
gap: clamp(0.4375rem, 2.8cqi, 0.75rem);
font-size: clamp(0.72rem, 3.7cqi, 0.82rem);
}
.opening-day,
.opening-time {
white-space: nowrap;
}
}
@container toros-location-card (min-width: 30.001rem) {
.location-content h2 {
font-size: clamp(1.9rem, 6.5cqi, 2.6rem);
}
.phone {
font-size: clamp(0.94rem, 2.8cqi, 1.08rem);
}
.address {
font-size: clamp(0.78rem, 2.2cqi, 0.88rem);
}
.opening-row {
gap: clamp(0.75rem, 3cqi, 1.25rem);
}
}
@supports not (container-type: inline-size) {
@media (min-width: 481px) and (max-width: 579px) {
.opening-row {
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.375rem;
}
.opening-day,
.opening-time {
white-space: nowrap;
}
}
}
.location-content {
padding-top: clamp(0.55rem, calc(0.95rem * var(--card-v-scale)), 1.2rem);
padding-bottom: clamp(0.5rem, calc(0.82rem * var(--card-v-scale)), 1.05rem);
padding-inline: clamp(0.7rem, calc(var(--card-inline) * 0.043), 1.25rem);
gap: clamp(0.08rem, calc(0.18rem * var(--card-v-scale)), 0.3rem);
}
.location-content h2 {
margin-bottom: clamp(0.08rem, calc(0.18rem * var(--card-v-scale)), 0.28rem);
font-size: clamp(1.45rem, calc(2rem * var(--card-text-scale)), 2.45rem);
line-height: clamp(1.01, calc(1.04 * var(--card-v-scale)), 1.07);
}
.gold-line {
width: clamp(3.75rem, calc(var(--card-inline) * 0.195), 5.5rem);
margin-bottom: clamp(0.2rem, calc(0.48rem * var(--card-v-scale)), 0.72rem);
}
.location-info {
gap: clamp(0.08rem, calc(0.2rem * var(--card-v-scale)), 0.38rem);
}
.phone {
font-size: clamp(0.8rem, calc(1rem * var(--card-text-scale)), 1.06rem);
line-height: clamp(1.08, calc(1.15 * var(--card-v-scale)), 1.2);
}
.address {
font-size: clamp(0.68rem, calc(0.82rem * var(--card-text-scale)), 0.88rem);
line-height: clamp(1.14, calc(1.2 * var(--card-v-scale)), 1.26);
}
.location-card:not(.location-card-trattoria) .opening-times {
margin-top: auto;
margin-bottom: auto;
padding-block: clamp(0.16rem, calc(0.38rem * var(--card-v-scale)), 0.58rem);
}
.location-card:not(.location-card-trattoria) .location-button {
margin-top: 0;
}
.opening-title {
margin-bottom: clamp(0.12rem, calc(0.34rem * var(--card-v-scale)), 0.5rem);
font-size: clamp(0.62rem, calc(0.69rem * var(--card-text-scale)), 0.73rem);
}
.opening-row {
gap: clamp(0.35rem, calc(var(--card-inline) * 0.026), 1rem);
padding-block: clamp(0.035rem, calc(0.11rem * var(--card-v-scale)), 0.17rem);
padding-inline: clamp(0.125rem, calc(var(--card-inline) * 0.008), 0.34rem);
font-size: clamp(0.68rem, calc(0.82rem * var(--card-text-scale)), 0.86rem);
line-height: clamp(1.06, calc(1.14 * var(--card-v-scale)), 1.2);
}
.location-button,
.location-button.is-open,
.location-button.is-closed,
.location-button-reopening {
min-height: clamp(1.15rem, calc(1.625rem * var(--card-v-scale)), 1.8rem);
padding-inline: clamp(0.25rem, calc(var(--card-inline) * 0.014), 0.5rem);
gap: clamp(0.2rem, calc(var(--card-inline) * 0.01), 0.42rem);
}
.button-label {
font-size: clamp(0.64rem, calc(0.82rem * var(--card-text-scale)), 0.86rem);
line-height: clamp(1.01, calc(1.07 * var(--card-v-scale)), 1.1);
}
.button-status-dot {
width: clamp(0.32rem, calc(0.4375rem * var(--card-text-scale)), 0.48rem);
height: clamp(0.32rem, calc(0.4375rem * var(--card-text-scale)), 0.48rem);
}
.button-arrow {
font-size: clamp(0.8rem, calc(1.15rem * var(--card-text-scale)), 1.22rem);
}
.location-card-trattoria .closed-badge {
margin-top: auto;
font-size: clamp(0.62rem, calc(0.7rem * var(--card-text-scale)), 0.74rem);
}
.location-card-trattoria .reopening-text {
font-size: clamp(0.88rem, calc(1.05rem * var(--card-text-scale)), 1.12rem);
line-height: clamp(1.08, calc(1.14 * var(--card-v-scale)), 1.18);
}
.location-card-trattoria .closed-description {
font-size: clamp(0.7rem, calc(0.8rem * var(--card-text-scale)), 0.84rem);
line-height: clamp(1.18, calc(1.25 * var(--card-v-scale)), 1.3);
margin-bottom: auto;
}
.location-card-trattoria .location-button-reopening {
margin-top: 0;
}
@container toros-location-card (max-width: 30rem) {
.location-card-trattoria .closed-badge {
margin-top: auto;
}
.location-card-trattoria .reopening-text {
margin-bottom: auto;
}
}
@container toros-overview (min-width: 44rem) and (max-width: 70rem) {
.location-card-gelenau,
.location-card-auerbach {
min-height: clamp(7.25rem, 29dvh, 22.5rem);
}
.location-card-trattoria,
.location-card:last-child {
grid-column: 1 / -1;
width: min(38.75rem, 100%);
min-height: clamp(3.625rem, 18dvh, 14.375rem);
justify-self: center;
}
}
@container toros-overview (min-width: 70.001rem) {
.location-card {
min-height: clamp(16.875rem, 40dvh, 31.25rem);
max-height: 31.25rem;
}
}
@media (max-width: 68.75rem) {
body {
background-attachment: scroll;
background-position: center top;
}
}
@media (hover: none), (pointer: coarse) {
.hero-logo-link:hover,
.location-card:hover,
.phone:hover,
.location-button:hover {
transform: none;
}
}
@media (max-width: 30rem) and (orientation: portrait) {
.hero-logo, .restaurant-logo {
width: clamp(7.5rem, calc(37.5dvh - 7rem), 11rem);
}
.locations {
gap: clamp(0.4375rem, 1.5dvh, 0.75rem);
}
}
@media (max-width: 30rem) and (max-height: 45rem) and (orientation: portrait) {
.hero-logo, .restaurant-logo {
width: clamp(6.25rem, 17.5dvh, 7rem);
}
.address {
display: none;
}
.location-info {
gap: 0;
}
}
@media (max-height: 35rem) and (min-width: 30rem) {
.hero-logo, .restaurant-logo {
width: clamp(6rem, 23dvh, 7.2rem);
}
.hero-divider {
width: 3.625rem;
}
.locations {
row-gap: 0.25rem;
column-gap: 0.5rem;
margin-top: 0.125rem;
margin-bottom: 0.1875rem;
}
.location-card-gelenau,
.location-card-auerbach {
min-height: 7.25rem;
}
.location-card-trattoria,
.location-card:last-child {
min-height: 3.625rem;
}
.address,
.opening-title {
display: none;
}
.opening-times {
margin-block: 0.125rem 0.0625rem;
padding-block: 0.0625rem;
}
.overview-visitor-counter {
padding-block: 0.0625rem;
font-size: clamp(0.56rem, 2.2dvh, 0.64rem);
}
}
@media (min-width: 70.001rem) and (max-height: 59.375rem) {
.hero {
padding-block: 0.375rem 0.25rem;
}
.hero-logo, .restaurant-logo {
width: clamp(11.25rem, 25dvh, 15.625rem);
margin-bottom: 0.125rem;
}
.locations {
margin-top: 0.3125rem;
margin-bottom: 0.4375rem;
}
.location-content {
padding-top: clamp(0.75rem, 1.6dvh, 1rem);
padding-bottom: clamp(0.625rem, 1.4dvh, 0.875rem);
}
.opening-times {
margin-block: 0.4375rem;
padding-block: 0.3125rem;
}
}
html.toros-prize-open,
body.toros-prize-open {
overflow: hidden;
}
.toros-prize-overlay {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(0, 0, 0, 0.84);
backdrop-filter: blur(7px);
}
.toros-prize-box {
width: min(540px, 100%);
position: relative;
padding: 34px 28px 28px;
border: 1px solid rgba(224, 180, 54, 0.85);
border-radius: 8px;
background: linear-gradient(145deg, rgba(28,25,18,.99), rgba(5,5,5,.99));
box-shadow: 0 24px 70px rgba(0,0,0,.72), 0 0 45px rgba(218,171,44,.12);
color: #e7dcc2;
text-align: center;
}
.toros-prize-close {
position: absolute;
top: 10px;
right: 12px;
width: 36px;
height: 36px;
border: 0;
background: transparent;
color: #cdb56f;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.toros-prize-kicker {
margin-bottom: 7px;
color: #d9ad3e;
font-size: .78rem;
font-weight: 700;
letter-spacing: .17em;
text-transform: uppercase;
}
.toros-prize-title {
margin: 0 0 12px;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(2rem, 7vw, 3.1rem);
font-weight: normal;
color: #efc85e;
}
.toros-prize-text {
margin: 0 auto 20px;
max-width: 410px;
line-height: 1.55;
color: #d7c9aa;
}
.toros-prize-pin-label {
margin-bottom: 7px;
color: #9f9276;
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
}
.toros-prize-pin {
margin: 0 auto 18px;
padding: 15px 18px;
border: 1px solid rgba(225,181,53,.62);
border-radius: 5px;
background: rgba(211,165,47,.08);
color: #ffe394;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: clamp(1.45rem, 6vw, 2.2rem);
font-weight: 800;
letter-spacing: .08em;
overflow-wrap: anywhere;
user-select: all;
}
.toros-prize-hint {
margin: 0 auto;
max-width: 430px;
color: #b8ab90;
font-size: .86rem;
line-height: 1.5;
}
.toros-prize-terms {
display: inline-block;
margin-top: 15px;
color: #f0cf6a;
font-size: .86rem;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.toros-prize-terms:hover {
color: #ffe69a;
}
.toros-prize-close-note {
margin: 14px auto 0;
max-width: 430px;
color: #8f846c;
font-size: .76rem;
line-height: 1.45;
}
.toros-prize-locations {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 20px;
}
.toros-prize-location {
min-height: 46px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border: 1px solid #d8ab35;
border-radius: 4px;
background: rgba(216,171,53,.10);
color: #f2d67e;
text-decoration: none;
font-weight: 700;
}
.toros-prize-location:hover {
background: rgba(216,171,53,.19);
}
.toros-prize-close:focus-visible,
.toros-prize-location:focus-visible,
.toros-prize-terms:focus-visible,
.toros-prize-reopen:focus-visible {
outline: 3px solid currentColor;
outline-offset: 3px;
}
.toros-prize-reopen {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 99990;
min-height: 43px;
padding: 10px 15px;
border: 1px solid rgba(219,174,51,.78);
border-radius: 4px;
background: rgba(8,8,8,.94);
color: #e7c868;
box-shadow: 0 10px 30px rgba(0,0,0,.45);
font: inherit;
font-size: .82rem;
font-weight: 700;
cursor: pointer;
}
@media (max-width: 520px) {
.toros-prize-box { padding: 31px 19px 23px; }
.toros-prize-locations { grid-template-columns: 1fr; }
.toros-prize-reopen { right: 10px; bottom: 10px; }
}
.site-footer {
box-sizing: border-box;
width: 100%;
flex: 0 0 auto;
margin-top: auto;
padding: clamp(0.3125rem, 0.7dvh, 0.75rem) 1rem clamp(0.375rem, 0.85dvh, 0.875rem);
border-top: 1px solid rgba(201, 162, 58, 0.28);
color: #bcb29e;
font-size: 0.82rem;
line-height: 1.55;
text-align: center;
}
.site-footer strong {
color: inherit;
font-weight: 600;
}
.site-footer-legal {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem 0.5625rem;
margin-top: 0.5rem;
}
.site-footer-legal a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 1.75rem;
box-sizing: border-box;
color: #d7cdb7;
text-decoration: underline;
text-decoration-color: rgba(201, 162, 58, 0.55);
text-underline-offset: 0.1875rem;
}
.site-footer-legal a:hover,
.site-footer-legal a:focus-visible {
color: #f0d982;
}
@media (max-width: 480px) {
.site-footer {
padding-top: clamp(0.5rem, 1.3dvh, 1.25rem);
padding-bottom: clamp(0.625rem, 1.6dvh, 1.5rem);
}
}
@media (min-width: 481px) and (max-width: 1099px) {
.site-footer {
padding-top: clamp(0.125rem, 0.6dvh, 0.4rem);
padding-bottom: clamp(0.1875rem, 0.75dvh, 0.5rem);
font-size: clamp(0.56rem, calc(0.43rem + 0.55dvh), 0.70rem);
line-height: clamp(1.05em, calc(0.95em + 0.3dvh), 1.25em);
}
.site-footer-legal {
gap: clamp(0.25rem, calc(0.2rem + 0.35vw), 0.45rem);
margin-top: clamp(0.0625rem, 0.3dvh, 0.3125rem);
}
}
@media (min-width: 1100px) and (max-height: 950px) {
.site-footer {
padding: 0.375rem 0.75rem 0.5rem;
font-size: 0.70rem;
line-height: 1.2;
}
.site-footer-legal {
margin-top: 0.1875rem;
gap: 0.4375rem;
}
}
@media (orientation: landscape) and (max-height: 30rem) and (max-width: 64rem) {
.site-footer-legal a {
min-height: 1.25rem;
}
}

/* Restaurant-Bild: dieselben Groessenlimits wie das Kopf-Logo, ohne dessen Schatten. */
.location-content .restaurant-logo-heading {
    max-width: 100%;
    flex: 0 0 auto;
    margin: 0 0 clamp(0.2rem, 0.6dvh, 0.5rem);
    line-height: 0;
}
.restaurant-logo-heading .restaurant-logo {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    filter: none;
}