@font-face {
font-family: 'Catallina';
src:
local('Catallina'),
local('Cattalina'),
url(//www.amadeusconcertsvienna.com/wp-content/themes/amadeusconcerts/assets/fonts/Catallina.otf) format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Cattalina';
src:
local('Cattalina'),
local('Catallina'),
url(//www.amadeusconcertsvienna.com/wp-content/themes/amadeusconcerts/assets/fonts/Catallina.otf) format('opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'RalewayVar';
src: url(//www.amadeusconcertsvienna.com/wp-content/themes/amadeusconcerts/assets/fonts/Raleway-VariableFont_wght.woff2) format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
--gold: #d4af37;
--dark: #1a1a1a;
--light: #faf8f3;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--light);
color: var(--dark);
font-family: 'Raleway', 'Lato', sans-serif;
font-size: 1.15rem; line-height: 1.80;
overflow-x: hidden;
} .fade-in {
opacity: 1;
transform: none;
transition: none;
}
.fade-in.visible {
opacity: 1;
transform: none;
} .lang-toggle {
position: absolute; top: 20px;
right: 20px;
z-index: 30; background: rgba(255,255,255,0.95);
border: 1px solid var(--gold);
color: var(--gold);
padding: 6px 14px;
border-radius: 5px;
cursor: pointer;
font-weight: 700;
font-size: 0.85rem;
transition: all 0.3s ease;
text-decoration: none;
}
.lang-toggle:hover {
background: var(--gold);
color: #fff;
}
.lang-dropdown {
position: absolute;
top: 20px;
right: 20px;
z-index: 30;
}
.lang-dropdown select {
appearance: none;
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--gold);
color: #8a6a11;
padding: 8px 36px 8px 12px;
border-radius: 6px;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
line-height: 1.2;
}
.lang-dropdown::after {
content: "▼";
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--gold);
font-size: 0.65rem;
pointer-events: none;
} .hero {
position: relative;
height: 90vh;
overflow: hidden;
} .hero img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: brightness(95%);
transition: opacity 0.5s ease;
} .hero .overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: white;
font-family: 'RalewayVar', 'Raleway', sans-serif;
padding: 0 1rem;
}
.hero-title {
font-family: 'Catallina', 'Cattalina', 'Playfair Display', serif;
color: #d4af37;
text-align: center;
line-height: 1.05;
}
.hero-title,
.hero-title * {
font-family: 'Catallina', 'Cattalina', 'Playfair Display', serif !important;
} .hero-line-1 {
display: block;
font-size: 4.4rem;
letter-spacing: 0.03em;
text-shadow:
1px 1px 0 #b8962e,
2px 2px 4px rgba(0,0,0,0.35);
} .hero-line-2 {
display: block;
font-size: 5.6rem;
margin-top: 0.15rem;
letter-spacing: 0.1em;
text-shadow:
1px 1px 0 #b8962e,
2px 2px 4px rgba(0,0,0,0.35);
} @media (max-width: 700px) {
.hero-line-1 { font-size: 2.9rem; }
.hero-line-2 { font-size: 3.6rem; }
.lang-dropdown {
top: 16px;
right: 12px;
}
}
.hero h2 {
margin-top: 1.9rem;
padding: 0;
font-weight: 600;
font-size: 1.25rem; line-height: 1.4;
color: rgba(255,255,255,0.95);
text-align: center;
background: transparent;
border: 0;
outline: 0;
box-shadow: none;
max-width: 92%;
}
.hero-credit {
display: inline-block;
font-size: 0.88em;
}
.hero-credit-name {
font-style: italic;
}
.hero-cta-button {
margin-top: 1.1rem;
display: inline-block;
padding: 0.8rem 1.6rem;
border-radius: 6px;
border: 1px solid var(--gold);
background: var(--gold);
color: #1a1a1a;
text-decoration: none;
font-weight: 700;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.2);
} section {
max-width: 820px;
margin: 4rem auto;
padding: 0 1.5rem;
text-align: center;
}
h3 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: var(--gold);
margin-bottom: 1rem;
}
.divider {
width: 90px;
height: 2px;
background: var(--gold);
margin: 1.2rem auto;
} .image-block {
margin-top: 4rem;
margin-bottom: 2rem;
text-align: center;
}
.image-block img {
width: 100%;
max-height: 420px;
object-fit: contain;
object-position: center top;
filter: brightness(95%);
transition: transform 8s ease;
}
.image-block img:hover {
transform: scale(1.03);
} .tickets-section {
background: white;
text-align: center;
padding: 4rem 1.5rem 5rem;
}
.tickets-section h4 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: var(--gold);
margin-bottom: 1.5rem;
}
.tickets-section p {
max-width: 700px;
margin: 0 auto 2.5rem;
color: #333;
font-size: 1.05rem;
}
.cta-button {
display: inline-block;
margin: 0 auto 2rem;
padding: 0.85rem 1.8rem;
border-radius: 6px;
background: var(--gold);
border: 1px solid var(--gold);
color: #1a1a1a;
font-weight: 700;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.14);
}
.floating-cta-button {
position: fixed;
right: 18px;
bottom: 18px;
z-index: 80;
display: inline-block;
padding: 0.85rem 1.2rem;
border-radius: 999px;
border: 1px solid var(--gold);
background: var(--gold);
color: #1a1a1a;
text-decoration: none;
font-weight: 700;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.floating-cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24);
} .promo-badge {
display: inline-block;
margin-bottom: 2.2rem;
padding: 0.9rem 1.6rem;
background: #fff8e1;
border: 2px solid var(--gold);
border-radius: 999px;
font-weight: 700;
color: #b3871a;
font-size: 1rem;
box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.next-dates-block {
max-width: 760px;
margin: 0 auto 1.8rem;
padding: 1rem 1.1rem;
background: #fff;
border: 1px solid #ece4d0;
border-radius: 10px;
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.next-dates-title {
font-family: 'Playfair Display', serif;
color: #1a1a1a;
font-size: 1.18rem;
margin: 0 0 0.65rem;
}
.next-dates-all-link {
display: inline-block;
margin: 0;
font-size: 0.82rem;
color: #8a6a11;
text-decoration: none;
}
.next-dates-all-wrap {
margin: 0.5rem 0 0;
text-align: right;
}
.next-dates-all-link:hover {
text-decoration: underline;
}
.next-dates-list {
list-style: none;
margin: 0;
padding: 0;
}
.next-dates-item {
border-top: 1px solid #f1ead8;
}
.next-dates-item:first-child {
border-top: 0;
}
.next-dates-item a {
display: flex;
gap: 0.75rem;
justify-content: space-between;
align-items: center;
text-decoration: none;
color: #1a1a1a;
padding: 0.62rem 0;
}
.next-dates-item a:hover {
color: #8a6a11;
}
.next-dates-date {
font-weight: 700;
color: #8a6a11;
white-space: nowrap;
}
.next-dates-name {
text-align: right;
font-size: 0.98rem;
}
.ticket-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.ticket-links a {
display: inline-block;
padding: 1rem 1.8rem;
border: 1px solid var(--gold);
color: var(--gold);
text-decoration: none;
border-radius: 6px;
font-weight: 600;
transition: all 0.3s ease;
}
.ticket-links a:hover {
background: var(--gold);
color: #111;
transform: translateY(-2px);
}
.reviews-section {
max-width: 1100px;
margin: 1rem auto 2.5rem;
background: white;
border: 1px solid #ece4d0;
border-radius: 10px;
padding: 1rem 1.2rem;
display: flex;
align-items: center;
gap: 1.2rem;
box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}
.reviews-section h3 {
margin: 0;
font-size: 1.4rem;
color: var(--dark);
}
.reviews-copy {
text-align: left;
flex: 1;
}
.reviews-copy p {
margin: 0.15rem 0 0;
color: #444;
font-size: 0.98rem;
}
.review-widgets {
display: flex;
align-items: center;
justify-content: center;
min-width: 200px;
}
.review-widgets .TA_excellent {
transform: scale(0.85);
transform-origin: center;
}
.viator-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.viator-logo-link img {
height: 42px;
width: auto;
display: block;
}
.reviews-logos {
display: flex;
align-items: center;
gap: 1.2rem;
flex-wrap: wrap;
justify-content: flex-end;
}
footer {
background: var(--dark);
color: #ccc;
text-align: center;
padding: 1.4rem;
font-size: 0.9rem;
letter-spacing: 0.4px;
}
.footer-link {
color: #f2d46b;
text-decoration: underline;
text-underline-offset: 2px;
}
.footer-link:hover,
.footer-link:focus-visible {
color: #ffe6a1;
}
@media (max-width: 700px) {
.hero { height: 75vh; } .hero .overlay {
justify-content: flex-start;
padding-top: 10vh;
background: linear-gradient(
to bottom,
rgba(255,255,255,0.78) 0%,
rgba(255,255,255,0.35) 45%,
rgba(255,255,255,0.00) 75%
);
} .hero img {
filter: brightness(90%);
object-position: center 45%;
} .hero-line-1 { font-size: 2.9rem; }
.hero-line-2 { font-size: 3.6rem; }
.hero-cta-button {
display: none;
margin-top: 0.7rem;
padding: 0.7rem 1.1rem;
font-size: 0.95rem;
} .hero h2{
margin-top: 0.8rem;
padding: 0.66rem 1.02rem;
font-weight: 600;
font-size: 0.94rem;
line-height: 1.35;
text-align: center;
color: rgba(255,255,255,0.96);
background: rgba(0,0,0,0.10);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border-radius: 8px;
border: 0;
box-shadow: 0 20px 68px rgba(0,0,0,0.38);
position: relative;
isolation: isolate;
max-width: 85%;
}
.hero h2::after {
content: "";
position: absolute;
inset: 4px;
border: 1px solid rgba(241, 207, 116, 0.82);
box-shadow:
0 0 0 1px rgba(184, 136, 34, 0.72),
inset 0 0 0 1px rgba(176, 129, 30, 0.75),
inset 0 0 0 5px rgba(255, 233, 173, 0.24),
inset 0 0 18px rgba(220, 176, 75, 0.22);
pointer-events: none;
z-index: 1;
} h3, .tickets-section h4 { font-size: 1.6rem; }
.image-block img { max-height: 300px; }
.promo-badge { width: 100%; max-width: 420px; padding-inline: 1.2rem; }
.reviews-section {
margin: 0.5rem 1rem 2rem;
padding: 1rem;
flex-direction: column;
align-items: center;
text-align: center;
}
.reviews-copy { text-align: center; order: 1; }
.reviews-logos { width: 100%; order: 2; justify-content: center; gap: 1rem; }
.review-widgets { justify-content: center; }
.review-widgets .TA_excellent { transform: scale(0.75); }
.viator-actions { justify-content: center; }
.viator-logo-link img { height: 32px; }
.floating-cta-button {
right: 12px;
bottom: 12px;
padding: 0.72rem 1rem;
font-size: 0.92rem;
}
} @media (min-width: 701px) {
.video-embed.video-desktop {
position: relative;
width: min(960px, 68vw); margin: 4rem auto 0;
padding: 22px;
background: #faf8f3;
border: 2px solid #1a1a1a;
box-shadow: 0 20px 60px rgba(0,0,0,0.18);
} .video-embed.video-desktop::before {
content: "";
position: absolute;
inset: 8px;
border: 1px solid #d4af37;
pointer-events: none;
} .video-embed.video-desktop iframe {
border-radius: 0;
display: block;
}
} .page-impressum header {
background: var(--dark);
color: #fff;
padding: 2rem 1.5rem;
text-align: center;
}
.page-impressum header h1 {
font-family: 'Playfair Display', serif;
color: var(--gold);
font-size: 2rem;
}
.page-impressum main {
max-width: 900px;
margin: 2.5rem auto;
padding: 0 1.5rem;
}
.page-impressum h2 {
font-family: 'Playfair Display', serif;
color: var(--gold);
font-size: 1.6rem;
margin: 2rem 0 0.7rem;
}
.page-impressum p,
.page-impressum li {
color: #222;
}
.page-impressum .box {
background: #fff;
padding: 1.2rem;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 8px;
}
.page-impressum a { color: var(--gold); }
.page-impressum footer {
background: #1a1a1a;
color: #ccc;
text-align: center;
padding: 1.2rem;
margin-top: 3rem;
font-size: 0.95rem;
} .video-embed iframe {
width: 100%;
border: 0;
display: block;
} .video-desktop { display: block; }
.video-mobile { display: none; } .map-image-block {
margin: 2rem auto 0;
max-width: 620px;
}
.map-image-block img {
width: 100%;
height: auto;
display: block;
}
.map-address-link {
display: inline-block;
margin: 0.7rem auto 0;
color: var(--gold);
text-decoration: underline;
text-underline-offset: 2px;
font-family: 'RalewayVar', 'Raleway', sans-serif;
font-size: 1rem;
line-height: 1.35;
} .video-desktop iframe {
aspect-ratio: 16 / 9;
} @media (max-width: 700px) {
.video-desktop { display: none; }
.video-mobile { display: block; }
.video-mobile iframe {
aspect-ratio: 9 / 16;
max-height: 80vh;
border-radius: 10px;
}
.map-image-block {
width: 85%;
max-width: 85%;
margin: 1.4rem auto 0;
}
.map-image-block img {
width: 100%;
margin: 0 auto;
border: 1px solid var(--gold);
box-sizing: border-box;
}
.map-address-link {
font-size: 0.98rem;
}
} @media (max-width: 700px) and (orientation: portrait) and (max-height: 780px) {
.hero { height: 70vh; }
.hero .overlay {
padding-top: 6vh;
}
.hero-line-1 { font-size: 2.35rem; }
.hero-line-2 { font-size: 2.9rem; }
.hero h2 {
margin-top: 0.55rem;
padding: 0.5rem 0.82rem;
font-size: 0.9rem;
line-height: 1.28;
border-width: 5px;
max-width: 84%;
}
.hero h2::after {
inset: 3px;
}
} .faq-section {
max-width: 820px;
margin: 4rem auto;
padding: 0 1.5rem;
text-align: center;
}
.faq-list {
margin-top: 2rem;
text-align: left;
}
.faq-item {
background: #fff;
border: 1px solid #ece4d0;
border-radius: 10px;
margin-bottom: 0.9rem;
box-shadow: 0 8px 20px rgba(0,0,0,0.04);
overflow: hidden;
}
.faq-question {
list-style: none;
cursor: pointer;
padding: 1rem 1.1rem;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 700;
color: #1a1a1a;
gap: 1rem;
}
.faq-question::-webkit-details-marker {
display: none;
}
.faq-icon {
width: 28px;
height: 28px;
border: 1px solid #d4af37;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #d4af37;
font-weight: 800;
flex: 0 0 auto;
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.faq-item[open] .faq-icon {
transform: rotate(45deg);
background: #d4af37;
color: #fff;
}
.faq-answer {
padding: 0 1.1rem 1.1rem;
color: #444;
}
.faq-answer p {
margin-top: 0.25rem;
line-height: 1.7;
} @media (min-width: 701px) {
.hero .overlay { inset: auto;
left: 50%;
top: 72%;
transform: translate(-50%, -50%);
width: min(840px, calc(92vw - 24px));
padding: 1.6rem 2rem 1.3rem;
border-radius: 8px;
border: 0;
background: rgba(0,0,0,0.10);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
box-shadow:
0 20px 68px rgba(0,0,0,0.38);
position: absolute;
isolation: isolate;
z-index: 2; text-align: center;
}
.hero .overlay > * {
position: relative;
z-index: 2;
}
.hero .overlay::after {
content: "";
position: absolute;
inset: 6px;
border: 1px solid rgba(241, 207, 116, 0.82);
box-shadow:
0 0 0 1px rgba(184, 136, 34, 0.72),
inset 0 0 0 1px rgba(176, 129, 30, 0.75),
inset 0 0 0 5px rgba(255, 233, 173, 0.24),
inset 0 0 18px rgba(220, 176, 75, 0.22);
pointer-events: none;
z-index: 1;
} .hero h2 {
background: transparent;
border: 0;
box-shadow: none;
color: rgba(255,255,255,0.95);
font-weight: 650; font-size: 1.55rem; line-height: 1.35;
margin-top: 1.0rem; padding: 0;
max-width: 860px;
}
}