html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,
figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
body {
min-height: 100vh;
color: #5a5151;
cursor: auto;
background-color: #fff;
font-family: Fustat, Lato, Hind, Arial, Helvetica, sans-serif;
line-height: 1.5;
margin: 0;
}
* {
box-sizing: border-box;
}
/*=====================================================================*/
/* Pfeil-Button zum Hochscrollen */
/*=====================================================================*/
/* CSS für den Button */
#scrollBtn {
position: fixed; /* Bleibt sichtbar beim Scrollen */
bottom: 20px; /* Abstand vom unteren Rand */
right: 4px; /* Abstand vom rechten Rand */
z-index: 99; /* Sorgt dafür, dass er über anderen Elementen liegt */
border: none;
outline: none;
background-color: #c5cdd5; /* Blaue Hintergrundfarbe */
color: black;
cursor: pointer;
padding: 10px 3px;
border-radius: 1em; /* Macht ihn rund */
font-size: 18px;
transition: opacity 0.3s; /* Sanfter Übergang für Sichtbarkeit */
}
#scrollBtn:hover {
background-color: #818990;
}
.arrow-up {
/* Einfacher Pfeil mit CSS */
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 12px solid white;
display: inline-block;
margin-bottom: 2px; /* Für Ausrichtung */
}
/*=====================================================================*/
/* navigation languages - box top-3 */
/*=====================================================================*/
/* Grundstyling */
.lang-switcher ul {
padding-bottom: 0.6em;
margin: 0 auto;
}
.lang-switcher li {
position: relative;
display: block;
}
.current-lang {
display: block;
}
.lang-switcher {
margin-left: auto;
margin-right: auto;
}
/* Untermenü verstecken */
.submenu-lang {
display: none;
position: absolute;
top: 100%;
background: #fff;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.submenu-lang li {
padding-left: 1.8em;
padding-right: 2em;
line-height: 1.8em;
}
/* Einblenden beim Hover */
.current-lang:hover .submenu-lang {
display: block;
}
/* Optional: Weicher Übergang (statt display:none) */
.submenu-lang {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease;
}
.current-lang:hover .submenu-lang {
opacity: 1;
visibility: visible;
}
/*=====================================================================*/
/* Navigation main */
/*=====================================================================*/
.topnav {
overflow: hidden;
background-color: #fff;
font-size: 16px;
font-weight: 500;
letter-spacing: 2.4px;
text-transform: uppercase;
display: block;
height: 100%;
text-align: center;
align-content: center;
}
.topnav a {
padding: 0 12px 0 12px;
float: left;
color: #555;
text-decoration: none;
}
.topnav a:active {
box-shadow: 2px 2px 5px #fc894d;
}
.topnav .icon {
display: none;
}
.topnav .topnav-selected {
padding-left: 20px;
transition: color 150ms;
text-decoration: underline;
}
.dropdown-main {
z-index: 99;
padding: 0 12px 1px 12px;
font-size: 14px;
font-weight: 500;
float: left;
overflow: hidden;
font-family: "Fustat", sans-serif;
letter-spacing: 2.4px;
text-transform: uppercase;
}
.dropdown-main .dropbtn {
font-size: 16px;
font-weight: 500;
border: none;
outline: none;
color: #555;
background-color: inherit;
font-family: "Fustat", sans-serif;
letter-spacing: 2.4px;
text-transform: uppercase;
margin: 0;
}
.dropbtn {
padding-top:0;
}
/* Zeichen für drei Linien ☰ als Button */
.mobile-btn {
font-size: 1.5em;
text-align: left;
}
.dropdown-content {
font-size: 1em;
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0 8px 16px 0 rgb(0, 0, 0, 0.2);
z-index: 1;
padding: 4px 1px;
}
.sidenav-selected,
.dropdown-content a {
float: none;
color: #555;
padding: 8px 8px;
border-bottom: 1px solid #efe8db;
display: block;
text-align: left;
font-size: 1em;
}
.dropdown-selected {
float: none;
color: #b4a9a9;
padding: 8px 8px 8px 22px;
border-bottom: 1px solid #efe8db;
display: block;
text-align: left;
font-size: 1em;
text-decoration: underline;
}
.topnav a:hover, .dropdown-main:hover .dropbtn, .ibe:hover {
color: #9d794a;
}
.dropdown-content a:hover {
color: #9d794a;
}
.dropdown-main:hover .dropdown-content {
display: block;
}
.dropdown-content a:active {
font-size: 0.9em;
border-bottom: 2px solid #939090;
padding-left: 18px;
color: #939090;
}
.border-bottom-line {
border: 1px solid #939090;
transition: color 150ms;
color: #939090;
text-decoration: none;
}
/* topnav responsive */
@media screen and (max-width: 600px) {
.topnav, .dropdown-main, .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown-main {
float: none;
}
.topnav.responsive .dropdown-content {
position: relative;
}
.topnav.responsive .dropdown-main .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
@media (max-width: 480px) {
.mobile-btn {
font-size: 2em;
text-align: left;
padding-left: 10px;
}
}
/*====================== ende topnav ====================== */
table.customTable ul li ul li a {display:block !important;}
table.customTable a:hover {
box-shadow: inset 18em 0 0 0 #54b3d6;
color: white;
}
table.customTable th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
color: white;
}
table.customTable a {
box-shadow: inset 0 0 0 0 #b6b2b2;
padding: .25em;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
table.customTable tr:nth-child(even){background-color: #f2f2f2;}
table.customTable {
font-size: 1em;
width: 100%;
background-color: #FFFFFF;
border-collapse: collapse;
border: 1px solid #ddd;
color: #000000;
}
table.customTable td, table.customTable th {
border: 1px solid #ddd;
padding: 8px;
width: 50%;
}
table.customTable thead {
background-color: #b6b2b2;
}
table.customTable a:hover {
box-shadow: inset 18em 0 0 0 #b6b2b2;
color: white;
}
.sm {
font-size: 0.9em;
font-weight: 400;
padding-right: 10px;
}
.text-center { text-align: center; }
.label {
font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', Times, serif;
color: #145cb9;
font-weight: 500;
transition: color 150ms;
text-align: center;
font-size: 2.2em;
padding-top: 0;
margin-top: 0;
}
h1 {
font-family: Fustat, sans-serif;
font-size: 2.4em;
font-style: normal;
font-variant: normal;
font-weight: 400;
word-spacing: 2px;
}
h2 {
font-family: Fustat, sans-serif;
font-size: 1.7em;
font-weight: 500;
text-align: center;
margin: 1em 0;
}
h3 {
font-family: Fustat, sans-serif;
font-size: 1.7em;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 1.5em;
margin: 0 0.3em;
padding-bottom: 15px;
}
h4 {
font-weight: 500;
font-size: 1.3em;
}
h5 {
font-weight: 500;
font-size: 1.6em;
padding-bottom: 0.7em;
}
h6 {
font-weight: 500;
font-size: 1.2em;
padding-bottom: 0.7em;
text-align: left;
}
h2 span {
font-family: 'Lato', Arial, Helvetica, sans-serif;
}
h5 span {
font-size: 1.0rem;
color: #248e83;
font-weight: 500;
line-height: 1.4em;
}
/*============= spaces ============= */
.space-top-1 { margin-top: 1em; }
.space-top-2 { margin-top: 2em; }
.space-top-3 { margin-top: 3em; }
.space-top-4 { margin-top: 4em; }
.space-top-80 { margin-top: 80px; }
.space-bottom-1 { margin-bottom: 1em; }
.space-bottom-2 { padding-bottom: 2em; }
.space-bottom-3 { margin-bottom: 3em; }
.space-bottom-4 { margin-bottom: 4em; }
.space-bottom-80 { margin-bottom: 80px; }
.width-1 { padding: 0 2em; margin-left: auto; margin-right: auto;}
.width-2 { padding: 0 4em; margin-left: auto; margin-right: auto; }
.bigger { font-size: 3.4rem; }
/*============= fonts ============= */
.font-georgia {
font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: 500;
font-size: 1.1em;
}
/*============= ============= */
a {
text-decoration: none;
color: #3d3c3c;
}
img {
vertical-align: middle;
}
ul > li {
list-style-type: none;
}
.white-text {
color: #FFF;
font-weight: lighter;
background-color: #b0927f;
border-radius: 50px 15px;
border: 5px solid #c6c4c1;
padding: 1.5em;
}
/*============= progress-bar: fortschrittslinie ============= */
.progress-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 2px; /* Höhe der Linie */
background: #eee; /* Hintergrundfarbe des Containers */
overflow: hidden;
z-index: 1000;
}
.progress-bar {
height: 100%;
width: 0%; /* Startbreite von 0% */
background: #efcc4c; /* Farbe der Fortschrittslinie */
}
/* Definiert die Keyframes für die Animation */
@keyframes grow-line {
from {
width: 0;
}
to {
width: 100%;
}
}
/*============= end ============= */
.line-space-center {
font-size: 1em;
line-height: 1.4em;
margin: 12px 20px 0 1em;
text-align: center;
}
.green-space-border {
border-left: 2px solid #00a800;
font-size: 1.3em;
padding-left: 12px;
margin-bottom: 18px;
margin-top: 8px;
text-align: left;
}
.red-space-border {
border-left: 2px solid #e91802;
font-size: 1.2em;
line-height: 1.5;
padding-left: 12px;
margin-bottom: 8px;
margin-top: 8px;
text-align: left;
}
.grey-space-border {
border-left: 2px solid #cbb29c;
font-size: 1.2em;
line-height: 1.5em;
padding-left: 12px;
padding-bottom: 8px;
padding-top: 8px;
text-align: left;
}
.red-border {
border-left: 2px solid #e91802;
font-size: 1.4em;
padding-left: 12px;
margin-bottom: 8px;
margin-top: 8px;
text-align: left;
}
.border-green {
border: 2px solid green;
}
.border-red {
border-left: 2px solid #e91802;
margin-bottom: 2px;
}
.underline-red {
text-decoration-line: underline;
text-decoration-color: #e91802;
}
.red {
font-family: Fustat, sans-serif;
color: #b99e9b;
font-size: 1.2em;
font-weight: 600;
letter-spacing: 1.2px;
text-transform: uppercase;
padding-right: 0.4em;
}
.inhalte-werden-zentriert {
display: flex;
align-items: center;
justify-content: center;
}
.cont-4-2 li { padding: 8px 0; }
.mov-line {
font-family: 'Dancing Script', Georgia, 'Times New Roman', Times, cursive;
font-size: 1.6em;
line-height: 1.4em;
text-align: center;
padding: 20px 0;
font-weight: 500;
}
.features-holidays {
color: #3d3c3c;
font-size: 1em;
text-align: left;
background-color: #b5cccc;
border: 1px solid transparent;
border-radius: 16px;
padding: 1em 1em;
margin-top: 4em;
width: 90%;
}
.features-holidays li {
padding: 3px 3px;
}
.features-snippet {
color: #3d3c3c;
font-size: 1.1em;
text-align: left;
line-height: 2em;
background-color: #d9e5e5;
border: 1px solid transparent;
border-radius: 16px;
padding: 16px 20px 20px 24px;
margin: 16px 20px 20px 24px;
}
.features-snippet h1 { padding: 0.4em 0; }
.features-snippet img { padding: 2em 3em; }
.online {
padding: 20px 20px;
}
.nobr {white-space: nowrap;}
.title-1 {
font-size: 2em;
line-height: 2em;
font-weight: 600;
text-align: center;
}
.title-2 {
font-size: 1.3em;
font-weight: 600;
margin-top: 10px;
}
.title-2 span {
font-family: Fustat, 'Segoe UI', Tahoma, Geneva, Verdana, cursive;
font-size: 1.2em;
line-height: 1.4em;
font-weight: 500;
text-align: left;
}
.title-3 {
font-family: Fustat, 'Segoe UI', Tahoma, Geneva, Verdana;
font-size: 1.8em;
font-weight: 600;
line-height: 1.4em;
text-align: center;
padding: 0 0 30px 0;
}
.title-3-underline {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana;
font-size: 1.6em;
font-weight: 500;
text-align: center;
padding: 0 0 30px 0;
/* Entfernt die Standard-Unterstreichung
text-decoration: none;
/* Setzt einen Hintergrund, der als Linie dient */
/* background-image: linear-gradient(to right, transparent 0%, transparent 40%, black 40%, black, transparent 60%, transparent 100%);
background-size: 100% 2px; /* Breite 100%, Höhe 2px */
/* background-position: 1.2em; /* Positionierung der Linie */
/* background-repeat: no-repeat;
/* bottom: 4px; */
}
/* in der Mitte unterstreichen */
.title-underline {
position: relative;
display: inline-block;
font-family: Fustat, Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.7em;
word-spacing: 2px;
text-transform: uppercase;
font-weight: bold;
color: #401f1c;
margin: 0 0 1.4em 0;
}
.title-underline span,
.title-underline-small span {
color: #efcc4c;
}
.title-underline:before,
.title-underline:after,
.title-underline-small:before,
.title-underline-small:after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.title-underline:before,
.title-underline-small:before {
bottom: -9px;
width: 40px;
border-bottom: 3px solid #efcc4c;
z-index: 1;
}
.title-underline:after,
.title-underline-small:after {
width: 90%;
border-bottom: 1px solid #ddd;
bottom: -8px;
}
.title-underline-small {
position: relative;
display: inline-block;
font-family: Fustat, Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.3em;
word-spacing: 2px;
text-transform: uppercase;
font-weight: bold;
color: #401f1c;
margin: 2em 0 1.4em 0;
}
.title-4 {
font-size: 1.4em;
font-weight: 600;
margin-bottom: 10px;
text-align: left;
}
.title-5 {
font-family: Neue Helvetica,helvetica,sans-serif;
font-size: 1.1em;
line-height: 100%;
font-weight: 500;
}
.title-6 {
font-family: 'Allura', 'Dancing Script', Georgia, 'Times New Roman', Times, cursive;
text-align: center;
font-size: 1.7em;
line-height: 1.4em;
word-spacing: 2px;
font-weight: 500;
margin-top: 20px;
margin-bottom: 10px;
padding: 0 3px;
}
.title-7 {
font-family: Neue Helvetica,helvetica,sans-serif;
font-size: 1.3em;
line-height: 1.4em;
font-weight: 500;
padding: 40px 0px 16px 0px;
}
.title-8 {
font-family: 'EB Garamond', Georgia, 'Times New Roman', Times, serif;
color: #2d7eb2;
font-size: 1.4em;
text-align: center;
padding: 20px 00 0;
}
.title-9 {
font-size: 1.3em;
padding-bottom: 1.6em;
}
.title-red {
font-size: 1.3em;
font-weight: 600;
margin-top: 10px;
margin: 1em;
padding: 1em;
}
.impressum {
text-align: center;
margin-left: 1em;
margin-right: 0;
margin-bottom: 1.8em;
padding: 3em 4em;
margin-top: 1em;
}
.impressum ul {
margin-bottom: 0.8em;
}
.impressum li {
color: #514e4a;
font-size: 1.1em;
font-weight: 400;
line-height: 1.7em;
text-align: left;
list-style-type: disc;
list-style-position: inside;
}
.first-line { font-size: 0.8em; }
.title-upper { text-transform: uppercase; }
.title-smaller { font-size: 1.6em; }
.font-garamond { font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', Times, serif; }
.font-dancing {
font-family: Baskerville, 'Baskerville Old Face', Garamond, 'Times New Roman', serif;
}
.title-page {
font-size: 2.4em;
font-weight: 400;
padding: 2em;
text-align: center;
}
.title-page-2 {
font-family: "Playfair Display";
font-size: 2.0em;
font-weight: 400;
padding: 2em 0 0 0;
text-align: center;
}
.title-page-3 {
font-size: 1.8em;
font-weight: 400;
padding: 0.8em;
text-align: center;
margin-left: auto;
margin-right: auto;
}
p { font-size: 14px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 20px; }
blockquote { font-family: "Playfair Display"; font-size: 21px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 30px; }
pre { font-family: "Playfair Display"; font-size: 13px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 18.5667px; }
.space-def-1 {
width: 75%;
}
.space-def-2 {
width: 90%;
text-align: center;
}
.description {
padding-left: 1em;
margin-left: auto;
margin-right: auto;
}
.description p {
font-family: Fustat, sans-serif;
font-size: 1.3em;
line-height: 1.6em;
text-align: left;
}
.features-title {
font-size: 1.6em;
font-weight: 500;
padding: 1em 0 0.4em 2em;
}
.features {
text-align: left;
font-size: 1.2em;
color: #574646;
line-height: 1.5em;
padding: 0.6em 0;
}
.features-center {
text-align: center;
font-size: 1.0em;
color: #574646;
line-height: 1.3em;
padding: 12px 0 00;
}
.features ul, .features-center ul {
list-style-type: circle;
padding:0;
margin:0;
}
.features li, .features-center li {
padding-left: 1em;
padding-bottom: 4px;
text-indent: -1.4em; /* minus position für Inhalt vr bei zeilenumbruch wichtig */
}
.features li:before, .features-center li:before {
padding-right:7px;
content: '◽';
font-size: 1.2em;
color: #6e6e5c;
}
.green {
/* Textfarbe (optional, aber empfohlen für Fallbacks) */
-webkit-text-fill-color: white;
/* Umrissfarbe und Dicke */
/* Für ältere WebKit-Browser */
-webkit-text-stroke: 2px solid #6e6e5c;
/* Vier Schatten für oben, rechts, unten, links */
text-shadow:
-1px -1px 0 #6e6e5c,
1px -1px 0 #6e6e5c,
1px 1px 0 #6e6e5c,
-1px 1px 0 #6e6e5c;
}
.offer-text {
font-size: 1.4em;
color: #574646;
line-height: 1.4em;
text-align: left;
padding-bottom: 0.5em;
}
.text-info {
font-size: 1.2em;
color: #574646;
line-height: 1.6em;
margin: 10px 8px;
text-align: left;
}
.width-1 { width: 65%; }
.width-2 { width: 80%; }
.tab-center { margin: 3em; }
.offer-text ul { margin: 10px 5px 10px 1em; }
.offer-text li {
font-weight: 600;
padding-bottom: 10px;
}
.list-none li {
list-style-type: none;
}
.infos {
width: 70%;
}
.infos p {
padding-bottom: 0.8em;
font-size: 1.2em;
font-weight: 400;
line-height: 1.3em;
}
.background-1 {
box-shadow: 5px 6px 13px 5px rgb(172, 159, 146, 0.68);
background: rgb(255, 167, 0, 0.5);
border: transparent solid 1px;
border-radius: 8px;
padding: 10px 0 20px 0;
}
.back-yellow {
box-shadow: 5px 6px 13px 5px rgb(172, 159, 146, 0.68);
background: rgb(255, 167, 0, 0.5);
border: transparent solid 1px;
border-radius: 8px;
padding: 10px 0 20px 0;
margin: 2em;
}
.back-yellow a {
padding: 10px 00 0;
}
room-cat-links {
font-size: 2.0em;
font-weight: 400;
padding-left: 18px;
color: #4e4842;
}
.room-cat-links > li {
padding: 0 0 12px 0;
color: #4e4842;
}
.room-cat-links > li > a {
padding: 0 0 2px 0;
color: #4e4842;
}
.width-90 {
width: 96%;
margin: 0 auto;
}
.align-justify { text-align: justify; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.align-left { text-align: left; }
.size-0 { font-size: 0.9em; }
.size-1 { font-size: 1.1em; }
.size-2 { font-size: 1.2em; }
.size-3 { font-size: 1.3em; }
.size-4 { font-size: 1.4em; }
.size-5 { font-size: 1.8em; }
.size-6 { font-size: 2.1em; letter-spacing: 1px; }
.color-orange-1 { color: #c35831; }
.color-blu-1 { color: #3ca7ce; }
.title-color {
color: #8f4c8f;
font-size: 1.1em;
font-weight: 500;
text-align: left;
padding-right: 10px;
text-transform: uppercase;
}
.right { padding: 10px 10px 0 20px; }
.left { padding: 10px 10px 0 20px; }
.right li, .left li {
list-style-type: circle;
margin-left: 6px;
padding-left: 4px;
padding-bottom: 2px;
}
.room-selected-3 {
font-size: 1.0em;
color: #4e4842;
opacity: 0.8;
text-decoration: underline;
}
.room-selected-3 a:hover { color: #4e4842; }
.tab-2-columns {
margin: auto;
}
.tab-2-columns ul {
display: grid;
grid-template-columns: 1fr 1fr; /* Erstellt zwei Spalten gleicher Breite */
}
.tab-2-columns li {
text-align: left;
font-size: 1.2em;
}
/*=====================================================================*/
/* Slideshow Bilderwechsel */
/*=====================================================================*/
.grid-item6-pictures
{
width: 100%;
padding:0000;
position: relative;
margin: auto;
}
.prev {
position: absolute;
z-index: 10;
opacity: 0.7;
content: "←"; /* Pfeil links */
top: 50%;
width: auto;
padding-right: 0.3em;
padding-left: 0.1em;
color: black;
background-color: white;
font-size: 2em;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
position: absolute;
z-index: 10;
opacity: 0.7;
content: "→"; /* Pfeil rechts */
top: 50%;
width: auto;
padding-left: 0.3em;
padding-right: 0.1em;
color: black;
background-color: white;
font-size: 2em;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
/* .active, .dot:hover {
background-color: #bdae9d;
}
*/
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 0.3s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/*=====================================================================*/
/* images */
/*=====================================================================*/
/* Funktioniert!!! Container holding the image and the text */
.container-img {
position: relative;
top: 80px;
text-align: center;
color: white;
font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', Times, serif;
font-size: 3.8em;
}
/* Centered text */
.centered {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Bottom left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position: absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.amensic-image-wrapper {
height : auto;
position : relative;
display : block;
margin : 0 auto;
}
.amensic-image-wrapper img {
width : 100% !important ;
height : auto !important ;
display : block;
}
.wrapper-img-bottom {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
margin: 0;
}
/*=====================================================================*/
/* Rooms-Link table */
/*=====================================================================*/
.button-book-now {
border-collapse: collapse;
text-align: right;
padding-right: 1em;
padding-bottom: 2em;
padding-top: 2em;
}
.button-book-now a {
font-size: 1em;
padding: .65em 1em .65em 1.4em;
transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
color: white;
/* background-color: #4785e8; */
background-color: rgb(59 130 246);
border-radius: 40px;
}
.button-book-now a:hover {
box-shadow: inset 19em 0 0 0 #145cb9;
color: white;
}
.button-book-now a:hover {
background: #62b3e5;
}
.button-boxes-right {
padding-top: 0;
text-align: right;
}
.button-boxes-right a {
font-family: Fustat, sans-serif;
font-size: 12px;
color: #3d4a48;
text-transform: uppercase;
letter-spacing: .2em;
cursor: pointer;
text-align: right;
border: 1px solid #727C7466;
padding: 12px 24px;
line-height: 18px;
text-decoration: none;
-webkit-transition: background-color .3s ease-out,color .3s ease-out,border-color .3s ease-out;
transition: background-color .3s ease-out,color .3s ease-out,border-color .3s ease-out;
}
.button-boxes-right a:hover {
color: #97877b;
text-decoration: underline;
}
/*=====================================================================*/
/* */
/*=====================================================================*/
.dropdown-content .separate::before { content: '▸'; font-size: 1.2em; } /* Insert a string b e f o r e the content of each (p or other) element */
.sidenav-dropdown-container .separate::before { content: '▸'; font-size: 0.8em; } /* Insert a string b e f o r e the content of each (p or other) element */
.dropbtn .separate::after { content: " ▼"; font-size: 0.8em; } /* Insert a string a f t e r the content of each (p or other) element */
.current-lang.separate::after { content: " ▼"; font-size: 0.6em; } /* Insert a string a f t e r the content of each (p or other) element */
.pfeil-rechts { font-size: 1.2em; } /* Insert a string b e f o r e the content of each (p or other) element */
.pfeil-links { font-size: 1.2em; } /* Insert a string b e f o r e the content of each (p or other) element */
.clearfix::after {
content: "";
clear: both;
display: table;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fill,minmax(380px,1fr));
gap: 1vw;
}
.card {
margin: 0 20px 0 20px;
}
.fixed-menu {
position: sticky;
top: -1px;
}
/*=====================================================================*/
/* intro */
/*=====================================================================*/
.intro {
margin-bottom: 3em;
}
/* Abstand nur bei Boxen mit Inhalt, nicht bei leeren Boxen */
.wrapper-content > div:not(:empty) {
margin-bottom: 6em;
}
.wrapper-rooms > div:not(:empty) {
margin-bottom: 6em;
}
.wrapper-ristorante > div:not(:empty) {
margin-bottom: 120px;
}
.wrapper-contact > div:not(:empty) {
margin-bottom: 6em;
}
.wrapper-common > div:not(:empty) {
margin-bottom: 6em;
}
.wrapper-footer > div:not(:empty) {
margin-bottom: 6em;
}
.wrapper- > div:not(:empty) {
margin-bottom: 6em;
}
/*=====================================================================*/
/* wrapper */
/*=====================================================================*/
.wrapper-init {
top: 0; /* Oben am Fenster fixieren */
display: flex;
z-index: 1;
justify-content: space-between; /* Logo links, Links rechts */
align-items: center; /* Vertikale Zentrierung */
position: fixed;
height: 80px;
left: 0;
right: 0;
padding-top: 10px;
padding-left: 1em;
padding-right: 1em;
background: #fff;
border-bottom: #f3f3f3 1px solid;
}
.top-0, .top-1, .top-2, .top-3 {
display: flex;
background: #fff;
}
.top-0, .top-1, .top-3 {
justify-content: center;
}
.top-2 {
justify-content: left;
}
.top-3 li a:hover {
color: #716060;
text-decoration: underline;
}
.lingue-selected {
border-bottom: 2px solid #939090;
transition: color 150ms;
}
.top-0 {
width: 5%;
}
.top-1 {
width: auto;
}
.top-2 {
width: 60%;
}
.top-3 {
width: 10%;
}
.top-1 {
width: 20%;
}
.lingue-selected {
border-bottom: 2px solid #939090;
transition: color 150ms;
}
/* --------------- Inhalt ----------------- */
.welcome {
font-size: 1em;
letter-spacing: .2em;
text-transform: uppercase;
text-align: center;
font-family: "Fustat", sans-serif;
font-weight: 400;
}
.villa {
text-align: center;
font-family: "Fustat", sans-serif;
font-size: 2em;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2.1px;
}
.picture-1 {
padding-top: 500px;
height: 100%;
background-image: url("mainfoto/banner-1-1920.jpg");
background-repeat: no-repeat;
background-size: cover; /* covers the entire area */
}
.grid-main-img-2-2-1 {
height: 100%;
background-image: url("mainfoto/cam-del-3-3.jpg");
background-repeat: no-repeat;
/* background-size: cover; covers the entire area */
}
.main-img-2-2-2 {
height: 100%;
background-image: url("mainfoto/main-img-2-2-2");
background-repeat: no-repeat;
background-size: cover;
}
.grid-main-img-3-1 {
height: 100%;
background-image: url("mainfoto/cam-del-3-3.jpg");
background-repeat: no-repeat;
/* background-size: cover; covers the entire area */
}
.grid-main-img-3-2 {
height: 100%;
background-image: url("mainfoto/Cam-22-1.jpg");
background-repeat: no-repeat;
/* background-size: cover; covers the entire area */
}
.grid-main-img-3-3 {
height: 100%;
background-image: url("mainfoto/cam-sup-1-12.jpg");
background-repeat: no-repeat;
/* background-size: cover; covers the entire area */
}
.grid-main-img-last {
height: 100%;
background-image: url("mainfoto/banner-Parco-1.jpg");
background-repeat: no-repeat;
/* background-size: cover; covers the entire area */
}
/* ================ wrapper "Common" ================ */
.wrapper-common {
display: grid;
grid-template-columns: 1fr 50%;
grid-template-rows: auto;
grid-template-areas: "common-1 common-2" "common-3 common-4" "common-5 common-5" "common-footer common-footer";
margin-left: 3em;
margin-right: 3em;
}
.common-1 { grid-area: common-1; width: 80%; margin: 3em }
.common-2 { grid-area: common-2; width: 80%; margin: 3em; }
.common-3 { grid-area: common-3; width: 80%; display: grid; justify-content: space-evenly; padding: 0.5em; }
.common-footer { grid-area: common-footer; padding: 2em 0 3em 0; }
.common-1 p { padding-bottom: 12px; font-size: 1.2em; line-height: 24px; }
/* ================ wrapper "Content" ================ */
.wrapper-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
margin-top: 0;
margin-left: 3em;
margin-right: 3em;
grid-template-areas: "content-title content-title" "a-1 a-2" "b-1 b-2" "c-1 c-2" "d-1 d-2" "e-1 e-2" "f-1 f-2" "g-1 g-2" "h-1 h-2" "i-1 i-2" "j-1 j-2" "k-1 k-2";
}
.content-title {
grid-area: content-title;
margin-top: 3em;
margin-bottom: 3em;
width:60%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.a-1 { grid-area: a-1; }
.a-2 { grid-area: a-2; }
.b-1 { grid-area: b-1; } .b-2 { grid-area: b-2; }
.c-1 { grid-area: c-1; } .c-2 { grid-area: c-2; }
.d-1 { grid-area: d-1; } .d-2 { grid-area: d-2; }
.e-1 { grid-area: e-1; } .e-2 { grid-area: e-2; }
.f-1 { grid-area: f-1; } .f-2 { grid-area: f-2; }
.g-1 { grid-area: g-1; } .g-2 { grid-area: g-2; }
.h-1 { grid-area: h-1; }
.h-2 { grid-area: h-2; }
.i-1 { grid-area: i-1; } .i-2 { grid-area: i-2; }
.j-1 { grid-area: j-1; } .j-2 { grid-area: j-2; }
.k-1 { grid-area: k-1; } .k-2 { grid-area: k-2; }
.b-1, .b-2, .c-1, .c-2, .d-1, .d-2, .e-1, .e-2, .f-1, .f-2, .g-1, .g-2, .h-1, .h-2, .i-1, .i-2, .j-1, .j-2 { margin: 0; }
/* ================ wrapper "Rooms" ================ */
.wrapper-rooms {
display: grid;
grid-template-columns: 1fr 1fr;
padding-top: 120px;
grid-template-areas: "rooms-title rooms-title" "ra-1 ra-2" "rooms-images rooms-images" "rb-1 rb-2" "rpic-1 rpic-1" "rc-1 rc-2" "rd-1 rd-2" "re-1 re-2" "rf-1 rf-2" "rg-1 rg-2"
"rh-1 rh-2" "ri-1 ri-2" "rj-1 rj-2";
}
.rooms-title {
grid-area: rooms-title;
margin-top: 3em;
margin-bottom: 1em;
width:46%;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.ra-1 { grid-area: ra-1; }
.ra-2 { grid-area: ra-2; }
.rb-1 { grid-area: rb-1; } .rb-2 { grid-area: rb-2; }
.rc-1 { grid-area: rc-1; } .rc-2 { grid-area: rc-2; }
.rd-1 { grid-area: rd-1; } .rd-2 { grid-area: rd-2; }
.re-1 { grid-area: re-1; } .re-2 { grid-area: re-2; }
.rf-1 { grid-area: rf-1; } .rf-2 { grid-area: rf-2; }
.rg-1 { grid-area: rg-1; } .rg-2 { grid-area: rg-2; }
.rh-1 { grid-area: rh-1; } .rh-2 { grid-area: rh-2; }
.ri-1 { grid-area: ri-1; } .ri-2 { grid-area: ri-2; }
.ra-1, .ra-2, .rb-1, .rb-2, .rc-1, .rc-2, .rd-1, .rd-2, .re-1, .re-2, .rf-1, .rf-2, .rg-1, .rg-2, .rh-1, .rh-2, .ri-1, .ri-2, .rj-1, .rj-2 { margin: 0 2em 0 2em; }
/* kleine Bildergalerie */
.rooms-images {
display:grid;
z-index: 1;
grid-column: 1 / span 2;
grid-template-columns: repeat(10, 1fr);
grid-gap: 1em;
padding: 3em 0 5em 0;
}
.rooms-images {
margin: 0 3em;
}
.rooms-images img {
margin: 1em auto;
border: 1px solid gainsboro;
padding: 2px;
cursor: pointer;
transition: all .6s ease;
position:relative;
}
.rooms-images img:hover {
border-radius: 5px;
padding: 0;
border: 2px solid white;
transform: scale(2);
z-index:999;
}
.rooms-images.zoomed img {
transform: scale(2);
}
.rpic-1 {
display:grid;
grid-column: 1 / span 2;
width: 50%;
margin: 3em auto;
}
/* ================ wrapper "Restaurant" ================ */
.wrapper-ristorante {
display: grid;
grid-template-columns: 50% 1fr;
grid-auto-rows: auto;
margin-top: 10px;
margin-left: 3em;
margin-right: 3em;
grid-template-areas: "ris-title ris-title" "ris-a-1 ris-a-2" "ris-images ris-images" "ris-b-1 ris-b-2" "ris-c-1 ris-c-2" "ris-d-1 ris-d-2" "ris-e-1 ris-e-2" "ris-f-1 ris-f-2"
"ris-g-1 ris-g-2" "ris-img-1 ris-img-1";
}
.ris-a-1 {
display: grid;
grid-area: ris-a-1;
place-self: center;
}
.ris-a-2 { grid-area: ris-a-2; }
.ris-title { grid-area: ris-title; padding-top: 5em; }
.ris-b-1 { grid-area: ris-b-1; } .ris-b-2 { grid-area: ris-b-2; }
.ris-c-1 { grid-area: ris-c-1; } .ris-c-2 { grid-area: ris-c-2; }
.ris-d-1 { grid-area: ris-d-1; } .ris-d-2 { grid-area: ris-d-2; }
.ris-e-1 { grid-area: ris-e-1; place-self: center; } .ris-e-2 { grid-area: ris-e-2; place-self: center; }
.ris-f-1 { grid-area: ris-f-1; } .ris-f-2 { grid-area: ris-f-2; }
.ris-g-1 { grid-area: ris-g-1; } .ris-g-2 { grid-area: ris-g-2; }
.ris-img-1 { grid-area: ris-img-1; }
.ris-images {
display:grid;
z-index: 1;
grid-column: 1 / span 2;
grid-template-columns: repeat(8, 1fr);
grid-gap: 1em;
}
.ris-images {
margin: 0 3em;
}
.ris-images img {
margin: 1em auto;
border: 1px solid gainsboro;
padding: 2px;
cursor: pointer;
transition: all .6s ease;
position:relative;
}
.ris-images img:hover {
border-radius: 5px;
padding: 0;
border: 2px solid white;
transform: scale(2);
z-index:999;
}
.ris-images.zoomed img {
transform: scale(2);
}
/* ================ wrapper "Image Map" ================ */
.img-map {
width: auto;
height: 500px;
margin: 0;
position: relative;
overflow: hidden;
}
.img-map iframe {
position: absolute;
top: 100px;
left: 0;
width: 100% !important;
height: 100% !important;
}
.wrapper-img-main {
display: flex;
}
.img-main { grid-area: img-main; display: grid; }
/* ================ wrapper "Contact" ================ */
.wrapper-contact {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
margin-top: 10px;
margin-left: 3em;
margin-right: 3em;
row-gap: 80px;
grid-template-areas: "cont-title cont-title" "cont-1-1 cont-1-2" "cont-map cont-map" "cont-2-1 cont-2-2" "cont-3-1 cont-3-2";
}
.cont-title { grid-area: cont-title; padding-top: 5em; }
.cont-1-1 { grid-area: cont-1-1; display: grid; }
.cont-1-2 { grid-area: cont-1-2; }
.cont-map { grid-area: cont-map; }
.cont-2-1 { grid-area: cont-2-1; }
.cont-2-2 { grid-area: cont-2-2; }
.cont-3-1 { grid-area: cont-3-1; }
.cont-3-2 { grid-area: cont-3-2; }
.cont-title-page {
font-family: "Playfair Display";
font-size: 2.0em;
font-style: normal;
font-variant: normal;
font-weight: 400;
padding: 2em 0 0 0;
text-align: center;
}
.cont-map { margin: 0; width: 70%; margin: auto; }
.cont-1-1, .cont-1-2 { margin: 2em 2em 0 2em; }
.cont-2-1, .cont-2-2 { margin: 0 2em; }
.cont-3-1, .cont-3-2 { margin: 0 5em; }
/* ================ wrapper footer ================ */
.wrapper-footer {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: 1em;
grid-template-areas: "common-footer";
margin-left: 3em;
margin-right: 3em;
}
.common-footer { grid-area: common-footer; display: grid; justify-content: space-around; }
/*=====================================================================*/
/* wrapper */
/*=====================================================================*/
.wrapper-2-col {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: auto;
row-gap: 20px;
column-gap: 30px;
margin-bottom: 3em;
font-size: 1.3em;
padding: 0 1em;
}
.place-self-res {
place-self: center;
padding: 2em;
}
.logo span {
color: #0474bc;
}
figure {
text-align: center;
}
figure img {
width: 50%;
}
#navbar {
display: flex;
background: #fff;
flex-wrap: wrap; /* Umbruch bei Platzmangel */
justify-content: space-between; /* Oder space-around für gleichmäßige Abstände */
}
.menu-selected {
background-color: #B09C73;
color: #fff;
font-size: 0.9em;
text-transform: uppercase;
padding: 5px 4px 3px 4px;
transition: color 150ms;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 3px;
bottom: 0;
left: 0;
background-color: #B09C73;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
.container-A {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(50px,1fr));
row-gap: 1rem;
padding-top: 120px;
}
.booking-cards {
font-size: 1.2em;
box-shadow: 5px 6px 13px 5px rgb(172, 159, 146, 0.68);
border: transparent solid 1px;
border-radius: 8px;
padding: 16px 2px;
margin-left: 5px;
margin-right: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.booking-reason {
box-shadow: 5px 6px 13px 5px rgb(172, 159, 146, 0.68);
border: transparent solid 1px;
border-radius: 8px;
padding: 16px 0;
justify-content: center;
align-items: center;
}
.d-inline-block {
display: inline-block !important ;
}
.subnav {
color: #3e3e3e;
float: right;
overflow: hidden;
text-decoration: none;
margin-left: 1em;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: #e6e3e1;
width: 100%;
padding: 8px 0 8px 1em;
z-index: 1;
}
.subnav-content a {
text-decoration: none;
padding: 4px 6px 4px 6px !important ;
font-size: 1em;
text-transform: none;
float: right;
}
.subnav, .subnavbtn {
outline: none;
margin: 0;
text-transform: uppercase;
font-size: inherit;
background-color: white;
padding-top: 0;
}
.subnavbtn {
color: #939090;
}
.nav-active {
color: #8d8989;
font-size: 0.9em;
word-spacing: normal;
border-bottom: 1px solid #b6b2b2;
margin: 6px 0 00;
cursor: none;
}
.subnav:hover .subnav-content {
display: block;
}
.subnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
#main {
transition: margin-left 0.6s;
margin: 30px 0 0 0;
}
button {
font-family: inherit;
}
.sidenav .closebtn {
position: absolute;
top: 0px;
right: 20px;
font-size: 50px;
border-bottom: none;
}
.sidenav-titolo {
padding-left: 24px;
padding-bottom: 18px;
padding-top: 8px;
text-transform: uppercase;
transition: color 150ms;
color: #c3bebe;
}
.sidenav-line {
border-bottom: 1px solid;
}
#sidenav-dropdown-container {
background-color: #fff;
}
#sidenav-dropdown-container a {
color: #514E4C;
font-size: 96%;
text-transform: none;
display: block;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
#sidenav-dropdown-container a:hover {
background-color: #e2e2e0;
}
.dropdown-btn {
padding: 6px 0 6px 8px;
text-decoration: none;
font-size: 1em;
color: white;
display: block;
border: none;
background: none;
width: 100%;
text-align: left;
cursor: pointer;
outline: none;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background: #fbfbf9;
color: #514E4C;
overflow-x: hidden;
transition: 0.5s;
padding-top: 30px;
}
#mysidenav, .sidenav {
box-shadow: 0 0 32px rgba(0,0,0,.5);
}
.sidenav-selected, .sidenav a {
display: block;
border-bottom: 1px solid #efe8db;
font-size: 1.1em;
color: #514E4C;
line-height: 1.6;
padding: 4px 2px 4px 20px;
text-transform: uppercase;
letter-spacing: 1px;
transition: 0.3s;
}
#sidenav-dropdown-container .sidenav-selected {
padding-left: 30px;
background-color: #e2e2e0;
text-decoration: underline;
}
/*=====================================================================*/
/* Rooms table */
/*=====================================================================*/
.rooms-tab {
border-collapse: collapse;
width: 100%;
}
.rooms-tab td { width: 45%; }
.rooms-tab td, .rooms-tab th {
border: 1px solid #ddd;
padding: 8px;
}
/* .rooms-tab tr:nth-child(even){ background-color: #fcfcfc; } */
/* .rooms-tab tr:hover {background-color: #ddd;} */
.rooms-tab th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #b6b2b2;
color: white;
}
/*=====================================================================*/
/* Rooms-Link table */
/*=====================================================================*/
.rooms-link {
font-size: 1.2em;
border-collapse: collapse;
width: 100%;
}
.rooms-link td { width: 50%; }
.rooms-link td, .rooms-link th {
border: 1px solid #ddd;
padding: 8px;
}
.rooms-link tr:nth-child(even){background-color: #f2f2f2;}
.rooms-link ul li ul li a {display:block;}
.rooms-link a {
box-shadow: inset 0 0 0 0 #d6d0c7;
padding: .25em .25em;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.rooms-link a:hover {
box-shadow: inset 0 0 0 0 #d6d0c7;
text-decoration: underline;
}
.rooms-link th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #b6b2b2;
}
/*=====================================================================*/
/* */
/*=====================================================================*/
.wrapper-top {
display: grid;
gap: 4px;
grid-template-columns: minmax(150px,max-content) repeat(auto-fill,150px);
background-color: #fff;
color: #444;
display: flex;
align-items: center;
justify-content: center;
padding-top: 8px;
}
.box-top {
padding: 0 10px 0 10px;
font-size: 0.8em;
}
.box-top a {
color: #6b7fa2;
font-weight: 600;
}
.box-top a:hover {
color: #36445e;
}
.logo-villa {
grid-column: auto / span 1;
grid-row: auto / span 2;
background-color: #fff;
margin-left: auto;
margin-right: auto;
}
.email {
grid-column: auto / span 2;
text-align: center;
background-color: #e6e3e1;
height: 5em;
padding-top: 5px;
font-weight: 500;
}
.telefon {
grid-column: auto / span 2;
text-align: center;
background-color: #e6e3e1;
height: 5em;
}
.reservation-link {
display: grid;
grid-column: auto / span 2;
justify-content: center;
align-content: space-evenly;
background-color: #e6e3e1;
height: 5em;
}
.lingue-link {
grid-column: auto / span 2;
margin-left: 3px;
margin-right: auto;
}
.lingue-link > a {
display: inline;
color: #716060;
font-size: 1em;
font-weight: 600;
padding: 0.6em 0.8em;
}
.lingue-link > a:hover {
color: #716060;
text-decoration: underline overline;
}
.lingue-menu-selected {
border-bottom: 2px solid #939090;
padding: 0em 0.3em;
transition: color 150ms;
font-weight: 600;
text-transform: uppercase;
transition: color 150ms;
}
.styled-booking-button {
font-weight: 600;
border: 0;
line-height: 2.6em;
padding-left: 1em;
width: 20em;
font-size: 1.1em;
text-align: center;
color: #fff;
border-radius: 40px;
background-color: white;
background-image: linear-gradient(to top left, rgb(0, 0, 0, 0.2), rgb(0, 0, 0, 0.2) 30%, rgb(0, 0, 0, 0));
box-shadow: 2px 2px 3px rgb(255, 255, 255, 0.6) inset, -2px -2px 3px rgb(0, 0, 0, 0.6) inset;
}
.styled a {
color: #6b7fa2;
text-decoration: none;
transition-duration: .4s;
font-weight: 500;
}
.styled:hover {
background-color: rgb(231, 236, 244);
color: #fff;
}
.styled-booking-button a {
color: #6b7fa2;
text-decoration: none;
transition-duration: .4s;
font-weight: 500;
}
.styled-booking-button:hover {
background-color: rgb(231, 236, 244);
color: #fff;
}
.styled-booking-button img {
padding-left: 1em;
padding-bottom: 5px;
}
.booking {
font-size: 1.1em;
color: #4e4842;
}
.booking img { padding: 0 5px 5px 5px; }
.tel {
font-size: 1em;
font-weight: 500;
color: #6b7fa2;
line-height: 1.5em;
padding: 5px 5px 5px 5px;
}
.mail {
font-size: 1em;
color: #145cb9;
}
.lingue ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-decoration: none;
}
.lingue li {
float: left;
}
.lingue li {
display: block;
text-align: center;
padding: 6px;
text-decoration: none;
}
.lingue a:hover {
text-decoration: none;
background-color: #82786e;
color: #fff !important ;
}
.wrapper {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill,minmax(400px,1fr));
background-color: #fff;
color: #444;
}
.box {
background-color: #fff;
color: #444;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}
.testo-main {
font-size: 1.1em;
line-height: 1.4em;
color: #574646;
text-align: left;
padding: 20px 20px 1em;
}
/*=====================================================================*/
/* Footer */
/*=====================================================================*/
.space-footer a {
color: #6e6a67;
}
.footer-container {
align-content: center;
padding: 20px 0 40px 0;
}
.grid-container-footer {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
align-content: center;
padding: 20px 0 40px 0;
}
.footer-part1 {
font-family: 'Allure', Georgia, 'Times New Roman', Times, serif;
font-size: 1.1em;
text-align: center;
word-spacing: 0.2em;
margin-bottom: 0.5em;
}
.footer-part2 {
padding: 0 0 0 0;
font-size: 0.95em;
text-align: center;
}
.footer-part3 {
padding: 0 0 10px 0;
font-size: 0.9em;
text-align: center;
line-height: 1.9em;
}
.footer li {
padding-bottom: 2px;
list-style: none;
}
/*=====================================================================*/
/* M O B I L E */
/*=====================================================================*/
@media (min-width: 481px) and (max-width: 1260px) {
/* ================ wrapper "INIT" ================ */
.wrapper-init {
padding-left: 0;
padding-right: 0;
margin-right: 0;
}
.top-0 {
width: 15%;
}
.top-1 {
width: 70%;
}
.navbar {
display: none;
}
.top-3 {
width: 15%;
font-family: Hind, Lato, Verdana, Geneva, Tahoma, sans-serif;
}
.topnav a {
padding: 0 5px 0 5px;
float: left;
color: #555;
text-decoration: none;
font-size: 12px;
letter-spacing: 1px;
}
.dropdown-main {
padding: 0 2px 1px 2px;
font-size: 12px;
float: left;
overflow: hidden;
font-family: "Fustat", sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
}
.dropdown-main .dropbtn {
font-size: 12px;
border: none;
outline: none;
color: #555;
background-color: inherit;
font-family: "Fustat", sans-serif;
letter-spacing: 1.4px;
text-transform: uppercase;
margin: 0;
}
.sidenav-selected,
.dropdown-content a {
float: none;
color: #555;
padding: 8px 2px;
border-bottom: 1px solid #efe8db;
display: block;
text-align: left;
font-size: 1em;
}
.dropdown-main .dropbtn {
font-size: 12px;
border: none;
outline: none;
color: #555;
background-color: inherit;
font-family: "Fustat", sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
margin: 0;
}
.villa {
font-size: 1.4em;
letter-spacing: 1.4px;
}
.welcome {
font-size: 12px;
letter-spacing: 2px;
}
.title-3 {
font-family: Fustat, 'Segoe UI', Tahoma, Geneva, Verdana;
font-size: 1.4em;
font-weight: 600;
line-height: 1.4em;
text-align: center;
padding: 0 0 30px 0;
}
.description {
padding: 1em;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.description p {
font-family: Fustat, sans-serif;
font-size: 1.3em;
line-height: 1.6em;
text-align: left;
padding-bottom: 0.8em;
padding-left: 0.8em;
padding-right: 0.4em;
}
.space-def {
font-size: 1.3em;
line-height: 1.4em;
padding-bottom: 0.6em;
padding-left: 1em;
padding-right: 1em;
}
.wrapper-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: auto;
margin-top: 2em;
margin-left: 0;
margin-right: 0;
row-gap: 4em;
column-gap: 2em;
}
.title-underline {
font-size: 1.4em;
word-spacing: 2px;
margin: 0 0 16px 0.6em;
}
.title-page {
font-size: 1.8em;
font-weight: 400;
padding: 1em;
text-align: center;
}
.title-7 {
font-size: 1.3em;
line-height: 1.4em;
font-weight: 500;
padding: 28px 0px 16px 0px;
}
.width-2 { width: 100%; padding-top: 1.6em; margin-left: auto; margin-right: auto; }
.white-text {
color: #FFF;
font-weight: lighter;
background-color: #b0927f;
border-radius: 50px 15px;
border: 5px solid #c6c4c1;
padding: 1.8em;
}
/* ================ wrapper "Restaurant" ================ */
.wrapper-ristorante {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
margin-top: 80px;
margin-left: 0.3em;
margin-right: 0.3em;
row-gap: 10px;
grid-template-areas: "ris-title" "ris-a-1" "ris-a-2" "ris-images" "ris-b-2" "ris-b-1" "ris-c-1" "ris-c-2" "ris-d-2" "ris-d-1" "ris-e-1" "ris-e-2" "ris-f-2"
"ris-f-1" "ris-g-2" "ris-g-1" "ris-img-1";
}
.ris-a-1 { grid-area: ris-a-1; margin-bottom: 2em; }
.ris-a-2 { grid-area: ris-a-2; }
.ris-a-1 p {
font-size: 1.3em;
line-height: 1.4em;
padding-bottom: 1em;
padding-left: 2.6em;
padding-right: 2.6em;
text-align: center;
}
.ris-images {
margin: 0 0.8em;
}
.ris-images {
z-index: 99;
grid-column: 1 / span 2;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
position: relative;
}
.ris-images img {
z-index: 99;
margin: 1em auto;
border: 1px solid gainsboro;
padding: 2px;
cursor: pointer;
transition: all .6s ease;
position: relative;
}
.rooms-images {
margin: 0 0.8em;
}
.rooms-images {
z-index: 99;
grid-column: 1 / span 2;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
position: relative;
}
.rooms-images img {
z-index: 99;
margin: 1em auto;
border: 1px solid gainsboro;
padding: 2px;
cursor: pointer;
transition: all .6s ease;
position: relative;
}
}
/*=====================================================================*/
/* Mobile min-width: 951 */
/*=====================================================================*/
@media (min-width: 951px) and (max-width: 1260px) {
.container-A {
grid-template-columns: repeat(2,1fr);
margin-top: 2em;
margin-left: 1em;
margin-right: 1em;
column-gap: 2em;
}
.features {
text-align: left;
font-size: 1.1em;
line-height: 1.15em;
padding: 0.6em 0.2em;
}
.width-2 {
width: 90%;
padding: 0;
margin-left: 0;
margin-right: 0;
}
.white-text {
padding: 0;
margin-left: 1em;
margin-right: 0;
}
}
/*=====================================================================*/
/* Media: 481 - 1260 */
/*=====================================================================*/
@media (min-width: 481px) and (max-width: 1260px) {
.wrapper-init {
padding-left: 0.1em;
padding-right: 0;
margin-right: 0;
}
.top-0 {
width: 15%;
}
.top-1 {
width: 70%;
}
.top-2 {
display: none;
}
.top-3 {
width: 15%;
font-family: Hind, Lato, Verdana, Geneva, Tahoma, sans-serif;
}
.lang-switcher {
padding: 0 0.4em 0 0.4em;
margin-left: auto;
margin-right: auto;
}
.submenu-lang li {
padding-left: 1.5em;
padding-right: 2em;
line-height: 2.4em;
}
.submenu-lang li {
line-height: 1.8em;
}
.container-A {
grid-template-columns: repeat(2,1fr);
padding-top: 96px;
margin-left: 2em;
margin-right: 2em;
font-size: 1em;
}
.booking-cards {
font-size: 1.1em;
box-shadow: 5px 6px 13px 5px rgb(172, 159, 146, 0.68);
border: transparent solid 1px;
border-radius: 8px;
padding: 2px 6px;
margin-left: 5px;
margin-right: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.centered {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.2rem;
}
.space-def-1 {
margin-left:auto;
margin-right: auto;
width: 90%;}
.space-def-2 {
margin-left: auto;
margin-right: auto;
width: 90%;
}
.container-bild-mit-text {
font-size: 0.8em;
}
.villa-1 {
font-size: 1em;
letter-spacing: 0em;
}
.villa-2 {
font-size: 1.2em;
letter-spacing: 0em;
}
.top-lingue {
margin: 0;
padding-bottom: 0;
}
.mobile-btn {
font-size: 2.4em;
text-align: left;
padding-left: 10px;
}
.wrapper-img-main {margin: 10px 0; }
.centered-title {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 1em;
font-weight: bold;
}
.title-page {
font-family: "Playfair Display";
font-size: 1.8em;
font-weight: 500;
padding: 0.6em;
text-align: center;
}
.title-page-2 {
font-size: 1.6em;
padding: 2em 0 0 0;
}
.title-page-3 {
font-size: 2.0em;
font-weight: 400;
padding: 2em 3em;
text-align: center;
margin-left: auto;
margin-right: auto;
}
top-0, .top-1, .top-2 { padding: 0; }
h1 { font-size: 2em; line-height: 1.2em; }
h2 { font-size: 1.6em; }
h3, h4, h5 span { font-size: 1.3em; padding: 8px 4px 8px 7px; }
h6 { font-size: 1.4em; }
.title-2 { font-size: 1.2em; margin: 20px 0; }
.title-2 li, .titolo-top-5 li { padding: 4px; }
.title-4 { font-size: 1.1em; text-align: center; }
.title-8 { font-size: 1.1em; padding: 12px 6px 6px; }
.title-color { font-size: 1em; }
.font-h6 { font-size: 0.9em; }
.features { font-size: 1.1em; }
.title-7 { font-size: 1em; }
.testo-main { font-size: 0.9em; }
.title-3 {
font-family: Fustat, Tahoma, Geneva, Verdana;
font-size: 1.4em;
font-weight: 500;
line-height: 1.4em;
text-align: center;
padding: 1em 0 1em 0;
}
.wrapper-content {
display: grid;
grid-template-columns: 1fr;
column-gap: 1em;
row-gap: 0.3em;
margin-left: 0;
margin-right: 0;
grid-template-areas: "content-title" "a-2" "a-1" "b-1" "b-2" "c-1" "c-2" "d-2" "d-1" "e-1" "e-2" "f-2" "f-1" "g-1" "g-2" "h-1" "h-2" "i-1" "i-2" "j-1" "j-2";
}
.content-title {
margin-top: 3em;
margin-bottom: 3em;
width:80%;
}
.a-1, .a-2 {
padding-left: 0;
padding-right: 0;
}
.common-1 p { font-size: 1.2em; padding-left: 6px; }
/* ================= wrapper rooms ================ */
.wrapper-rooms {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
column-gap: 0.2em;
row-gap: 2em;
margin-top: 80px;
margin-left: 0;
margin-right: 0;
grid-template-areas: "rooms-title" "ra-1" "ra-2" "rooms-images" "rb-2" "rb-1" "rpic-1" "rpic-2" "rc-1" "rc-2" "rd-2" "rd-1" "re-1" "re-2" "rf-1" "rf-2" "rg-1" "rg-2"
"rh-1" "rh-2" "ri-1" "ri-2";
}
.ra-1, .ra-2, .rb-1, .rb-2, .rc-1, .rc-2, .rd-1, .rd-2, .re-1, .re-2, .rf-1, .rf-2, .rg-1, .rg-2, .rh-1, .rh-2, .ri-1, .ri-2, .rj-1, .rj-2 {
margin: 0;
}
.space-top-3 { margin-top: 1em; }
.rooms-title {
width: 100%;
padding: 0;
margin: 0 0.5em;
}
.rooms-images {
margin: 0 0.8em;
}
.rooms-images {
display:grid;
grid-column: 1 / span 2;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
margin-top: 3em;
}
.rooms-images img {
margin: 1em auto;
border: 1px solid gainsboro;
padding: 2px;
cursor: pointer;
transition: all .6s ease;
position: relative;
}
.rpic-1 {
display: grid;
grid-column: 1 / span 2;
width: 100%;
margin: 1em auto;
}
/* ================= wrapper common ================ */
.wrapper-common {
margin-left: 0.2em;
margin-right: 0.2em;
}
.title-7 {
font-size: 1.2em;
font-weight: 400;
text-align: center;
padding: 2px 0px 8px 0px;
}
.button-boxes-right a {
font-size: 12px;
letter-spacing: .2em;
padding: 6px 16px;
}
.button-boxes-right {
padding: 1.2em 1em 3em 0;
text-align: right;
}
.features-holidays {
padding: 16px 1em 20px 1em;
margin: 16px 4px 20px 4px;
}
.impressum {
padding: 0.1em;
}
.red-space-border {
font-size: 1.2em;
margin-left: 10px;
margin-right: 2em;
}
.offer-text {
font-size: 1.2em;
padding-left: 2em;
padding-right: 2em;
padding-bottom: 0.6em;
}
.dropdown-main .dropbtn {
font-size: 1.1em;
border: none;
outline: none;
color: #555;
padding: 12px 8px;
background-color: inherit;
font-family: inherit;
padding-bottom: 1px;
}
.topnav a {
float: left;
display: block;
color: #555;
text-align: center;
padding-right: 7px;
padding-left: 7px;
padding-top: 11px;
text-decoration: none;
font-size: 1.1em;
}
.wrapper-top {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill,minmax(400px,1fr));
}
/* ================ wrapper contact ================ */
.wrapper-contact {
grid-template-columns: 1fr;
margin-top: 0;
row-gap: 1em;
margin-left: 0;
margin-right: 0;
grid-template-areas: "cont-title" "cont-1-1" "cont-1-2" "cont-map" "cont-2-1" "cont-2-2" "cont-3-1" "cont-3-2";
}
/* ================ wrapper "Restaurant" ================ */
.wrapper-ristorante {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
margin-top: 80px;
margin-left: 0.3em;
margin-right: 0.3em;
row-gap: 10px;
grid-template-areas: "ris-title" "ris-a-1" "ris-a-2" "ris-images" "ris-b-2" "ris-b-1" "ris-c-1" "ris-c-2" "ris-d-2" "ris-d-1" "ris-e-1" "ris-e-2" "ris-f-2"
"ris-f-1" "ris-g-2" "ris-g-1" "ris-img-1";
}
.ris-a-1 { grid-area: ris-a-1; margin-bottom: 1em; }
.ris-a-2 { grid-area: ris-a-2; }
.ris-title {
grid-area: ris-title;
padding-top: 0;
}
.title-5 {
font-family: Fustat, sans-serif;
font-size: 1.6rem;
font-weight: 600;
}
.ris-b-1 { grid-area: ris-b-1; } .ris-b-2 { grid-area: ris-b-2; }
.ris-c-1 { grid-area: ris-c-1; } .ris-c-2 { grid-area: ris-c-2; }
.ris-d-1 { grid-area: ris-d-1; } .ris-d-2 { grid-area: ris-d-2; }
.ris-e-1 { grid-area: ris-e-1; } .ris-e-2 { grid-area: ris-e-2; }
.ris-f-1 { grid-area: ris-f-1; } .ris-f-2 { grid-area: ris-f-2; }
.ris-g-1 { grid-area: ris-g-1; } .ris-g-2 { grid-area: ris-g-2; }
.ris-img-1 { grid-area: ris-img-1; }
.ris-a-1 p {
font-size: 1.3em;
line-height: 1.4em;
padding-bottom: 1em;
padding-left: 2.6em;
padding-right: 2.6em;
text-align: center;
}
.ris-images {
margin: 0 0.8em;
}
.ris-images {
display:grid;
grid-column: 1 / span 2;
grid-template-columns: repeat(4, 1fr);
grid-gap: 1em;
margin-top: 3em;
}
.ris-images img {
margin: 1em auto;
border: 1px solid gainsboro;
padding: 2px;
cursor: pointer;
transition: all .6s ease;
position: relative;
}
.description {
width: 96%;
padding: 0;
}
.description p {
font-size: 1.3em;
line-height: 1.4em;
padding-bottom: 0.8em;
padding-left: 0.6em;
padding-right: 1.2em;
}
/* ================ wrapper "common" ================ */
.wrapper-common {
display: grid;
grid-template-columns: 1fr;
row-gap: 1em;
grid-template-rows: auto;
grid-template-areas: "common-1" "common-2" "common-3" "common-4" "common-5" "common-footer";
margin-left: 1em;
margin-right: 1em;
}
.common-3 { grid-area: common-3; display: grid; padding-right: 1em; }
.links {
display: grid;
justify-content: right;
align-content: center;
grid-auto-flow: column;
gap: 1.2em;
padding-right: 2em;
font-size: 0.9em;
background-color: white;
overflow: hidden;
}
.links a {
text-decoration: none;
color: #3e3e3e;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
position: relative;
padding: 0.2em 0;
font-size: 1em;
}
.links a:hover {
text-decoration: none;
}
.links a:before, .subnav a:before {
content: "";
position: absolute;
width: 93%;
height: 3px;
bottom: 1px;
background-color: #B09C73;
visibility: hidden;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.subnav-content a {
text-decoration: none;
padding: 4px 2px 4px 2px;
font-size: 0.9em;
text-transform: none;
background-color: #3ca7ce;
}
#navbar {
background-color: #fcfcfc;
box-shadow: none;
font-size: 1em;
font-family: "Fustat", sans-serif;
text-align: left;
}
.space-top-header-b {
margin-top: 30px;
}
.box-top {
font-size: 0.8em;
gap: 10px;
}
.logo-villa {
grid-column: auto / span 1;
grid-row: auto / span 1;
justify-content: start;
align-content: center;
background-color: #fff;
}
.email {
grid-column: auto / span 1;
justify-content: center;
background-color: #e6e3e1;
}
.telefon {
grid-column: auto / span 1;
justify-content: center;
background-color: #e6e3e1;
}
.reservation-link {
grid-column: auto / span 1;
text-align: center;
background-color: #e6e3e1;
}
.styled {
border: 0;
line-height: 2.2em;
padding: 0 20px;
width: 18em;
font-size: 1.1em;
font-weight: bold;
}
.list-circle li {
list-style-type: circle;
text-align: left;
padding: 0 4px 6px 2px;
font-size: 0.8em;
}
.list-circle ul {
list-style-type: circle;
}
.grid-item2 {
margin-left: 9px;
margin-right: 9px;
}
.space-left-4 {
margin-left: 1em;
margin-right: 9px;
}
}
/*=====================================================================*/
/* responsive (max-width: 480px) */
/*=====================================================================*/
@media (max-width: 480px) {
/*=================== Pfeil-Button zum Hochscrollen =======================*/
/* CSS für den Button */
#scrollBtn {
position: fixed; /* Bleibt sichtbar beim Scrollen */
bottom: 20px; /* Abstand vom unteren Rand */
right: 4px; /* Abstand vom rechten Rand */
z-index: 99; /* Sorgt dafür, dass er über anderen Elementen liegt */
border: none;
outline: none;
background-color: #c5cdd5; /* Blaue Hintergrundfarbe */
color: black;
cursor: pointer;
padding: 10px 3px;
border-radius: 1em; /* Macht ihn rund */
font-size: 18px;
transition: opacity 0.3s; /* Sanfter Übergang für Sichtbarkeit */
}
#scrollBtn:hover {
background-color: #818990;
}
.arrow-up {
/* Einfacher Pfeil mit CSS */
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 16px solid white;
display: inline-block;
margin-bottom: 0px; /* Für Ausrichtung */
}
/* ------------------- end scroll button nach oben ------------------- */
.mobile-btn {
font-size: 2em;
text-align: left;
padding-left: 10px;
}
.wrapper-init {
padding-left: 0;
padding-right: 0;
margin-right: 0;
}
.top-0 {
width: auto;
}
.top-1 {
width: 70%
}
.top-2 {
width: 0;
}
.top-3 {
width: 20%;
justify-self: left;
font-family: Hind, Lato, Verdana, Geneva, Tahoma, sans-serif;
}
.welcome {
font-size: 0.8em;
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
font-family: "Fustat", sans-serif;
font-weight: 400;
}
.villa {
text-align: center;
font-family: "Fustat", sans-serif;
font-size: 1.1em;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.a-2 {
margin-bottom: 0;
}
.top-3 {
margin-top: 0;
}
.lang-switcher {
margin-left: auto;
margin-right: auto;
}
.submenu-lang li {
padding-left: 16px;
padding-right: 16px;
line-height: 1.8em;
}
/* Container holding the image and the text */
.container-img {
position: relative;
top: 80px;
text-align: center;
color: white;
font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, 'Times New Roman', Times, serif;
font-size: 1.1em;
}
/* Centered text */
.centered {
position: absolute;
top: 45%;
left: 50%;
width: 80%;
transform: translate(-50%, -50%);
}
.centered-title {
position: absolute;
width: auto;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
}
.space-def-1 {
margin-left:auto;
margin-right: auto;
width: 90%;}
.dropdown-main .dropbtn {
font-size: 1.3em;
text-align: right;
margin: 0;
}
.menu-selected {
font-size: 0.9em;
font-weight: 500;
padding: 0.3em 0em;
margin: 0 0px;
transition: color 150ms;
}
.container-A {
grid-template-columns: repeat(1,1fr);
margin-top: 80px;
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
.booking-cards {
font-size: 1.1em;
box-shadow: 2px 1px 6px 1px rgb(172, 159, 146, 0.68);
border: transparent solid 1px;
border-radius: 8px;
padding: 0.3em 2em;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
}
.description {
width: 100%;
padding-top: 20px;
padding-left: 0.4em;
padding-right: 0.4em;
}
.description p {
font-size: 1.2em;
line-height: 1.4em;
padding: 0.8em;
}
.title-underline {
font-size: 1.3em;
word-spacing: 2px;
margin: 0 0 22px 0;
}
h1 {
padding: 0.5em 0;
font-size: 1.5em;
font-weight: 600;
}
h2 {
font-size: 1.3em;
margin: 0;
}
h3, h5, h5 span {
font-size: 1.1em;
}
h4 {
font-size: 1.3em;
padding: 0 0.6em 0em 1em;
}
h6 {
font-size: 1.2em;
padding-left: 0.4em;
padding-right: 0.4em;
}
.title-1 {
font-size: 2em;
line-height: 2em;
font-weight: 600;
text-align: center;
}
.title-7 { font-size: 1.2em; font-weight: 500; padding: 0 0 1em 7px; }
.title-6, title-7 { font-size: 1.7em; }
.title-4 { font-size: 1em; font-weight: 500; padding-top:0; padding-bottom: 4px;}
.title-8 { font-size: 1.1em; padding: 12px 6px 6px; }
.title-color { font-size: 1em; }
.title-3 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana;
font-size: 1.3em;
font-weight: 500;
text-align: center;
padding-top: 1.6em;
}
.tab-2-columns ul {
display: grid;
grid-template-columns: 1fr auto; /* Erstellt zwei Spalten gleicher Breite */
}
.tab-2-columns {
padding-left: 8px;
font-size: 1.2em;
}
.button-boxes-right {
padding: 1.8em 0.2em 0.8em 0;
margin-right: 0;
}
.button-boxes-right a {
font-size: 12px;
letter-spacing: 0.1em;
line-height: 18px;
text-align: right;
border: 1px solid #727C7466;
padding: 6px 8px;
text-decoration: none;
-webkit-transition: background-color .3s ease-out,color .3s ease-out,border-color .3s ease-out;
transition: background-color .3s ease-out,color .3s ease-out,border-color .3s ease-out;
}
.tab-center {
margin: 1em 0.8em 1em 0.8em;
}
.space-def {
font-size: 1.2em;
padding-top: 0.5em;
line-height: 1.4em;
}
.wrapper-img-main {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
gap:0;
margin-top: 50px;
}
/*======================= wrapper content ===========================*/
.wrapper-content {
display: grid;
grid-template-columns: 1fr;
gap:0;
margin-top: 0px;
margin-left: 0.4em;
margin-right: 0.4em;
padding: 0;
grid-template-areas: "content-title" "a-1" "a-2" "b-2" "b-1" "c-1" "c-2" "d-2" "d-1" "e-1" "e-2" "f-2" "f-1" "g-1" "g-2" "h-1" "h-2" "i-1" "i-2" "j-1" "j-2";
}
.b-1, .b-2, .c-1, .c-2, .d-1, .d-2, .e-1, .e-2, .f-1, .f-2, .g-1, .g-2, .h-1, .h-2, .i-1, .i-2, .j-1, .j-2 {
box-shadow: none;
padding:0;
}
.b-1, .b-2, .c-1, .c-2, .d-1, .d-2, .e-1, .e-2, .f-1, .f-2, .g-1, .g-2, .h-1, .h-2, .i-1, .i-2, .j-1, .j-2 { margin: 0 0 1em 0; }
.a-1 {
grid-area: a-1;
margin-bottom: 1.3em;
margin-top: 2.6em;
}
/*======================= wrapper rooms ===========================*/
.wrapper-rooms {
display: grid;
grid-template-columns: 1fr;
column-gap:0;
row-gap: 0;
padding-top: 80px;
margin-top: 10px;
margin-left: 0;
margin-right: 0;
grid-template-areas: "rooms-title" "ra-2" "ra-1" "rooms-images" "rb-1" "rb-2" "rpic-1" "rpic-2" "rc-2" "rc-1" "rd-1" "rd-2" "re-1" "re-2" "rf-1" "rf-2" "rg-1" "rg-2"
"rh-1" "rh-2" "ri-1" "ri-2";
}
.rooms-title {
width: 100%;
text-align: center;
padding: 0 1em;
}
.rooms-title, .ra-1, .ra-2, .rooms-images, .rb-1, .rb-2, .rpic-1, .rpic-2, .rc-1, .rc-2, .rd-1, .rd-2, .re-1, .re-2, .rf-1, .rf-2, .rg-1, .rg-2, .rh-1, .rh-2,
.ri-1, .ri-2, .rj-1, .rj-2 { margin: 0; }
.ra-1 { grid-area: ra-1; }
.ra-2 { grid-area: ra-2; margin: 0; padding-top: 1em; }
.rooms-images {
margin: 0 0.8em;
}
.rooms-images {
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 0.2em;
margin-top: 0;
}
.rooms-images img {
margin: 1em auto;
padding: 2px;
cursor: pointer;
border: none;
transition: all .6s ease;
position: relative;
}
.rooms-images img:hover {
border-radius: 5px;
padding: 0;
border: none;
transform: scale(1.5);
z-index:999;
}
.rpic-1 {
display: grid;
grid-column: 1 / span 2;
width: 100%;
margin-bottom: 4em;
}
.column img {
padding: 3px;
}
.prev, .next {
width: 20px;
border-radius: 0 1px 1px 0;
}
.prev {
padding-left: 10px;
content: "← ";
font-size: 1.2em;
}
/* ================ wrapper "Restaurant" ================ */
.wrapper-ristorante {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
margin-top: 80px;
margin-left: 0.3em;
margin-right: 0.3em;
row-gap: 10px;
grid-template-areas: "ris-title" "ris-a-1" "ris-a-2" "ris-images" "ris-b-2" "ris-b-1" "ris-c-1" "ris-c-2" "ris-d-2" "ris-d-1" "ris-e-1" "ris-e-2" "ris-f-2" "ris-f-1" "ris-g-2" "ris-g-1" "ris-img-1";
}
.ris-title {
padding-top: 2em;
}
.ris-a-1 { margin-bottom: 0; margin-top: 1em; }
.ris-a-2 { grid-area: ris-a-2; }
.ris-b-1 { grid-area: ris-b-1; } .ris-b-2 { grid-area: ris-b-2; }
.ris-c-1 { grid-area: ris-c-1; } .ris-c-2 { grid-area: ris-c-2; }
.ris-d-1 { grid-area: ris-d-1; } .ris-d-2 { grid-area: ris-d-2; }
.ris-e-1 { grid-area: ris-e-1; } .ris-e-2 { grid-area: ris-e-2; }
.ris-f-1 { grid-area: ris-f-1; } .ris-f-2 { grid-area: ris-f-2; }
.ris-img-1 { grid-area: ris-img-1; }
.ris-a-1 p {
font-size: 1.3em;
line-height: 1.4em;
padding-bottom: 1em;
padding-left: 0.6em;
padding-right: 0.6em;
text-align: center;
}
.ris-images {
display:grid;
grid-column: 1 / span 2;
grid-template-columns: repeat(2, 1fr);
grid-gap: 0.6em;
margin: 2em 2em 2em 2em;
}
.ris-images img {
margin: 0;
border: 1px solid gainsboro;
padding: 2px;
cursor: pointer;
transition: all .6s ease;
position: relative;
}
.ris-images img:hover {
transform: scale(1.3); /* Bild wird 20% größer */
/* Optional: Schatten hinzufügen, um es hervorzuheben */
/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
}
.title-page {
font-family: "Playfair Display";
font-size: 1.8em;
font-weight: 500;
padding: 0;
text-align: center;
}
.title-page-2 {
font-size: 1.6em;
padding: 2em 0 0 0;
}
.title-page-3 {
font-size: 1.4em;
line-height: 1.4em;
width: 100%;
font-weight: 400;
padding: 0 0.4em 1em 0.4em;
text-align: center;
}
.title-1 {
font-size: 1.8em;
line-height: 1.5em;
font-weight: 500;
text-align: center;
margin: 0 0.2em 2em 0.2em;
}
.title-5 {
font-family: Fustat, sans-serif;
font-size: 1.3rem;
font-weight: 500;
}
/* ================ wrapper common ================ */
.wrapper-common {
margin-left: 0.2em;
margin-right: 0.2em;
}
.common-2 {
grid-area: common-2;
display: grid;
padding-left: 0.1em;
padding-left: 0.2em;
padding-right: 0.2em;
}
/* ================ wrapper contact ================ */
.wrapper-contact {
grid-template-columns: 1fr;
margin-top: 0;
row-gap: 1em;
margin-left: 0;
margin-right: 0;
grid-template-areas: "cont-title" "cont-1-1" "cont-1-2" "cont-map" "cont-2-1" "cont-2-2" "cont-3-1" "cont-3-2";
}
.cont-title {
padding-top: 0;
}
.cont-map { width: 100%; margin: auto;}
.cont-1-2, .cont-2-1, .cont-3-1, .cont-3-2 { margin: 0 1.5em; }
.cont-1-1, .cont-2-2 { margin: 1em 0; }
.img-map {
width: auto;
height: 500px;
margin: 0 0;
position: relative;
overflow: hidden;
}
/* ================ wrapper common ================ */
.wrapper-common {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: 1em;
grid-template-areas: "common-1" "common-2" "common-3" "common-4" "common-5" "common-footer";
margin-left: 1em;
margin-right: 1em;
}
.common-1, .common-2, .common-3 { width: 100%; justify-content:center; padding: 0; margin: 0; }
.common-4 { padding: 0 0.1em; }
.infos {
padding-top: 1.3em;
width: 94%;
}
.infos p {
padding-bottom: 10px;
font-size: 1.2em;
font-weight: 400;
padding: 0.4em 0 0.4em 0.4em;
}
.rooms-link a {
padding: 0;
text-align: justify;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.impressum {
padding: 0.1em;
margin: 0.3em;
}
.common-1 p {
padding-bottom: 12px;
font-size: 1.2em;
line-height: 24px;
}
.grid-item6-pictures {
margin-left: 0;
margin-right: 0;
}
.rooms-link { font-size: 1.1em; }
.rooms-link td, .rooms-link th {
border: 1px solid #ddd;
padding: 12px 0 12px 2px;
}
.mov-line {
font-size: 1.3em;
line-height: 1.3em;
padding: 0;
}
.box-top { padding: 0 4px 0 4px; }
.tel { padding: 5px 5px; }
.styled-booking-button {
margin-left: auto;
margin-right: auto;
font-size: 0.9em;
}
.red {
font-family: Fustat, sans-serif;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
margin-left: 0;
margin-top: 0;
}
.red-space-border {
font-size: 1.2em;
padding-left: 8px;
padding-right: 2px;
margin-left: 10px;
margin-top: 8px;
margin-bottom: 10px;
}
table.customTable {
font-size: 0.9em;
}
.features-holidays {
font-size: 0.9em;
padding: 16px 1em 20px 1em;
margin: 16px 20px;
}
.white-text {
color: #FFF;
font-weight: lighter;
line-height: 0.5em;
background-color: #bca08e;
border-radius: 15px 50px;
border: 1px solid #c6c4c1;
padding: 0.5em;
font-size: 1em;
}
.width-2 {
width: 96%;
}
.features {
font-size: 1.1em;
line-height: 1.5em;
padding: 0.6em 1em;
}
.features li {
text-indent: -2.8em;
padding-bottom: 4px;
}
.features-center li {
text-indent: -2.8em;
}
.features li {
padding-left: 1em;
padding-bottom: 8px;
text-indent: -1.5em; /* minus position für Inhalt vr bei zeilenumbruch wichtig */
}
.features li:before {
padding-right:7px;
content: '◽';
font-size: 0.9em;
color: #6e6e5c;
}
.features-center li {
padding-left: 1em;
padding-bottom: 8px;
text-indent: -1.4em; /* minus position für Inhalt vr bei zeilenumbruch wichtig */
}
.features-center li:before {
padding-right: 24px;
content: '◽';
font-size: 0.9em;
color: #6e6e5c;
}
.green-space-border {
border-left: none;
font-size: 1.3em;
padding-left: 0;
margin-bottom: 18px;
margin-top: 8px;
text-align: justify;
}
.cont-4-2 li {
font-size: 0.9em;
padding: 4px 0;
}
.offer-text {
font-size: 1.2em;
line-height: 1.5em;
padding-left: 0.6em;
padding-right: 0.4em;
}
.topnav a {
float: left;
display: block;
color: #555;
text-align: center;
padding: 14px 12px;
text-decoration: none;
font-size: 1em;
}
.dropdown-main .dropbtn {
font-size: 1em;
border: none;
outline: none;
color: #555;
padding: 14px 12px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.testo-main { font-size: 0.9em; }
.space-top-30 { padding-top: 0; }
.wrapper-top {
display: grid;
gap: 10px;
grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
}
.lingue > li > a {
color: #6b7fa2;
font-size: 0.9em;
display: inline;
padding:0 2px;
font-weight: 600;
}
.d-1 p { text-align: left; }
#navbar {
box-shadow: none;
}
.subnav-content {
/* display: none; */
position: absolute;
left: 0;
background-color: rgb(211, 211, 212);
width: 100%;
padding: 8px 0 8px 0;
z-index: 1;
}
.box-top {
gap: 10px;
}
.logo-villa {
grid-column: auto / span 1;
grid-row: auto / span 1;
justify-content: start;
align-content: center;
background-color: #fff;
}
.email {
grid-column: auto / span 1;
justify-content: center;
background-color: #e6e3e1;
}
.telefon {
grid-column: auto / span 1;
justify-content: center;
background-color: #e6e3e1;
}
.reservation-link {
grid-column: auto / span 1;
display: grid;
justify-content: center;
align-content: space-evenly;
background-color: #e6e3e1;
}
.booking {
font-size: 1.1em;
color: #4e4842;
}
.space-top-30 {
margin-top: 30px;
}
.font-h6 {
font-size: 1.1em;
}
.styled {
border: 0;
line-height: 2.4em;
width: 19em;
font-size: 1em;
margin: 20px;
}
.list-circle li {
list-style-type: circle;
text-align: left;
padding: 0 4px 6px 2px;
font-size: 1em;
}
.list-circle ul {
list-style-type: circle;
}
.grid-item2 {
margin-left: 9px;
margin-right: 9px;
}
.space-left-4 {
margin-left: 1em;
}
.box-1 {
padding: 10px;
font-size: 1em;
}
.box-1 .box-1 {
background-color: #ccc;
color: #444;
}
.wrapper-1 {
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
column-gap: 1em;
row-gap: 1em;
grid-template-areas: "v-1" "v-2" "v-3" "v-4";
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 2em;
}
.subnav-content {
/* display: none; */
position: absolute;
left: 0;
background-color: rgb(211, 211, 212);
width: 100%;
padding: 8px 0 8px 0;
z-index: 1;
}
.grid-main-img-last {
height: 100%;
background-image: url("mainfoto/banner-Parco-1-small.jpg");
background-repeat: no-repeat;
/* background-size: cover; covers the entire area */
}
}
/*
.thumbnail{
height: auto;
position:relative;
}
.thumbnail:hover {
width:600px;
height:auto;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
}
*/
/* ================ extras zum testen: hier für h1 ================ */
.ty-h1 {
font-family: Fustat, Neue Helvetica,helvetica,sans-serif;
font-size: 3.9rem;
font-style: normal;
font-weight: 500;
letter-spacing: .2142857143em;
line-height: 1.5em;
text-transform: uppercase;
}
.ty-h2 {
font-family: Neue Helvetica,helvetica,sans-serif;
font-size: 1.5rem;
font-style: normal;
font-weight: 200;
letter-spacing: 1px;
line-height: 1.2916666667em;
text-transform: uppercase;
}
@media only screen and (min-width: 1701px) {
.ty-h1 {
font-size: 3.8rem;
letter-spacing: 2px;
line-height: 1.3888888889em;
}
.ty-h2 {
font-size: 1.5rem;
letter-spacing: 1px;
line-height: 1.7em;
text-align: center;
}
}
@media only screen and (min-width: 701px) and (max-width: 960px) {
.ty-h1 {
font-size: 2.4em;
letter-spacing: .1em;
line-height: 2.4em;
}
.ty-h2 {
font-size: 1.3em;
letter-spacing: .1em;
line-height: 1.5em;
}
}
@media only screen and (min-width: 481px) and (max-width: 700px) {
.ty-h1 {
font-size: 1rem;
letter-spacing: .15625em;
line-height: 1.46875em;
}
.ty-h2 {
font-size: 1.5em;
letter-spacing: .1em;
line-height: 1em;
}
}
@media only screen and (min-width: 300px) and (max-width: 480px) {
.ty-h1 {
font-size: 2rem;
letter-spacing: .15em;
line-height: 1.5em;
}
.ty-h2 {
font-size: 1.1em;
letter-spacing: .1px;
line-height: 1.5em;
}
}
/* Position the image container (needed to position the left and right arrows) */
.container {
margin-top:auto;
position: relative;
margin:auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Add a pointer when hovering over the thumbnail images */
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: 30px;
background-color: white;
opacity: 0.5;
color: black;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
.prev {
padding-left: 4px;
padding-right: 0;
content: "← ";
font-size: 1.5em;
}
.next {
padding-right: 10px;
content: "→";
font-size: 1.5em;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgb(71, 66, 66);
color: white;
opacity: 0.5;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* Container für text unter dem Hauptbild */
.caption-container {
text-align: center;
background-color: white;
padding: 6px 16px;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* Six columns side by side */
.column {
float: left;
width: 16.66%;
}
/* Add a transparency effect for thumnbail images */
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
@keyframes showSlides {
0% {
opacity: 0;
transform: scale(1.1) rotate(-1.5deg);
}
2% {
opacity: 1;
}
10% {
opacity: 1;
}
12% {
opacity: 0;
transform: scale(1.3) rotate(1.5deg);
}
}
/* ================ behelfs massnahme, weil ohne diese Zeilen am Ende, der Button zum sidemenu sich nicht öffnet; fehler ist noch zu suchen ================ */