/* ==========================================================================
   DE FEERJENHUSEN – ZENTRALES STYLESHEET
   ========================================================================== */

/* ==========================================================================
   1. ALLGEMEINE EINSTELLUNGEN FÜR ALLE 10 HTML-SEITEN

   Dieser gesamte Bereich gilt für alle 10 HTML-Seiten, die mit dieser
   stylesheet.css verbunden sind.

   Dieser Bereich enthält:
   - zentrale Farben, Schriftarten, Schriftgrößen und Abstände
   - wiederverwendbare Schrift- und Farbkombinationen
   - allgemeine Grundeinstellungen für HTML, Body, Bilder, Videos und Links
   - allgemeine Hilfsklassen für Inhaltsbreiten und Container

   Änderungen in diesem Bereich können sich auf alle 10 HTML-Seiten auswirken.
   ========================================================================== */






/* Zentrale Variablen für alle 10 HTML-Seiten */

		/* Lokal gespeicherte Schrift Caveat für den Bildslider */

		@font-face {
			font-family: "Caveat";
			src: url("videos-schriften/Caveat-Regular.ttf") format("truetype");
			font-weight: 400;
			font-style: normal;
			font-display: swap;
		}

:root {
  --font-main: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --font-brand: "Segoe Script", "Segoe Print", cursive;
  --cream: #f6f5ee; 	/* Hintergrund des hellen Textbereichs „Willkommen hinter dem Deich“ 							   (.body-intro) #eee8dc */
  --brown: #646463; 	/* Hintergrund des dunklen Textbereichs „Ihr Zuhause für die Urlaubstage“
							 (.bottom-message) sowie kleine braune Überschrift im ersten Textbereich #625a51*/
  --dark: #545454; 		/* Hintergrund des Footers, dunkle Überschriften und Texte, Textlink „Alle 							  Ferienwohnungen ansehen“#312e2a*/
  --white: #fff; 		/* Sämtliche weißen Texte: Hauptüberschrift auf dem Video, Navigation, 							   heller Text im zweiten Textbereich*/
  --accent: #e5c096; 	/* Hintergrund der Klasse .button sowie Hoverfarbe der Footer-Navigation 						    #d9a858*/
  --overlay: rgba(21,27,26,.52);
  --display: clamp(3rem,7vw,7rem); 
  --heading: clamp(2rem,4vw,4.25rem);
  --body: clamp(1rem,1.3vw,1.2rem); 
  --content: 1380px;
  --padding: clamp(1.25rem,4vw,4.5rem); 
  --space: clamp(5rem,10vw,10rem);
  --transition: 450ms cubic-bezier(.22,1,.36,1);
}

/* Wiederverwendbare Schrift- und Farbkombinationen für alle 10 HTML-Seiten */
.text-display-light { 
	font: 400 var(--display)/.85 var(--font-main); /* war vorher .92 */
	color: var(--white); letter-spacing: -.045em; }

.text-heading-dark,.text-heading-light { 
	font: 400 var(--heading)/1.04 var(--font-main); 
	letter-spacing: -.035em; }

.text-heading-dark { 
	color: var(--dark); }

.text-heading-light { 
	color: var(--white); }

.text-body-dark,.text-body-light { 
	font: 400 var(--body)/1.75 var(--font-main); }

.text-body-dark { 
	color: var(--dark); } .text-body-light { 
	color: var(--white); }

.text-nav-light { 
	font: 700 .88rem/1.2 var(--font-main); 
	color: var(--white); 
	text-transform: uppercase; 
	letter-spacing: .14em; }

.text-small-light { 
	font: 400 .82rem/1.6 var(--font-main); 
	color: rgba(255,255,255,.76); }

.text-eyebrow-dark,.text-eyebrow-light { 
	margin: 0 0 1.25rem; 
	font: 700 .88rem/1.2 var(--font-main); 
	text-transform: uppercase; 
	letter-spacing: .14em; }

.text-eyebrow-dark { 
	color: var(--brown); } 
.text-eyebrow-light { 
	color: rgba(255,255,255,.78); }





/* Allgemeine Grundeinstellungen und Hilfsklassen für alle 10 HTML-Seiten */

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

html { 
	scroll-behavior: smooth; } 
body { 
	margin: 0; 
	background: #f7f3eb; 
	font-family: var(--font-main); }

img,video { 
	display: block; 
	width: 100%; } 

a { 
	color: inherit; 
	text-decoration: none; } 

button { 
	font: inherit; }

.sr-only { 
	position:absolute; 
	width:1px; 
	height:1px; 
	margin:-1px; 
	overflow:hidden; 
	clip:rect(0,0,0,0); }

.content-width { 
	width: min(calc(100% - 2 * var(--padding)),var(--content)); 
	margin-inline: auto; }

.content-width--narrow { 
	max-width: 1040px; }

.container-head,.container-body,.container-bottom { 
	position: relative; 
	width: 100%; }






/* ==========================================================================
   2. CONTAINER HEAD 1

   HTML-Seite: index.html
   Dieser Bereich gilt ausschließlich für den Container Head 1 der Startseite.
   Er gestaltet das Hintergrundvideo, die Abdunklung, die Navigation,
   den Firmenschriftzug, die Kontaktlinks und den Einführungstext im Head 1.
   ========================================================================== */
.head-hero { 
	min-height:100vh; 
	overflow:hidden; 
	background:#687573; }

.head-hero__video { 
	position:absolute; 
	inset:0; 
	z-index:1; 
	height:100%; 
	object-fit:cover; }

				/*ALT
				.head-hero__overlay { 
					position: absolute; 
					inset: 0; 
					z-index: 2; 
					background: linear-gradient(90deg,rgba(22,25,24,.66),var(--overlay),rgba(22,25,24,.3)); 
					pointer-events: none; } */

/* Verlaufende Abdunklung ausschließlich hinter der oberen Navigation */
.head-hero__overlay-top {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  height: 30%;
  background: linear-gradient(
    to bottom,
    rgba(20, 24, 24, 0.70) 0%,
    rgba(20, 24, 24, 0.45) 45%,
    rgba(20, 24, 24, 0.15) 75%,
    rgba(20, 24, 24, 0) 100%
  );
  pointer-events: none;
}

						/* Verlaufende Abdunklung ausschließlich hinter dem Text unten links */
						/* alt .head-hero__overlay-bottom-left {
						  position: absolute;
						  bottom: 0;
						  left: 0;
						  z-index: 2;
						  width: 72%;
						  height: 72%;
						  background: radial-gradient(
							ellipse at left bottom,
							rgba(20, 24, 24, 0.78) 0%,
							rgba(20, 24, 24, 0.60) 32%,
							rgba(20, 24, 24, 0.30) 58%,
							rgba(20, 24, 24, 0) 78%
						  );
						  pointer-events: none;
						} */

.head-hero__overlay-bottom-left {
  position: absolute;
  inset: 0;
  z-index: 2;

  background: radial-gradient(
    ellipse 85% 90% at 0% 100%,
    rgba(20, 24, 24, 0.78) 0%,
    rgba(20, 24, 24, 0.62) 28%,
    rgba(20, 24, 24, 0.38) 48%,
    rgba(20, 24, 24, 0.16) 65%,
    rgba(20, 24, 24, 0.05) 76%,
    rgba(20, 24, 24, 0) 88%
  );
  pointer-events: none;
}

.head-hero__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 1.6rem var(--padding) clamp(3rem,7vh,6rem);
  pointer-events: none;
}

.head-hero__content a,
.head-hero__content button {
  pointer-events: auto;
}

.head-nav { 
	display:grid; 
	grid-template-columns:1fr auto 1fr; 
	align-items:center; gap:2rem; }

/*alt .head-nav__apartments { 
	justify-self:start; 
	padding-block:.75rem; 
	border-bottom:1px solid rgba(255,255,255,.55);
	transition: border-color 0.3s ease;
}*/

/* Einheitliche Gestaltung aller Links in der oberen Navigation */

.head-nav__link {
  display: inline-flex;
  align-items: center;
  padding-block: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  transition: border-color 0.3s ease;
}

.head-nav__link:hover {
  border-bottom-color: transparent;
}

/* Zusätzliche Positionierung des links stehenden Links „Ferienwohnungen“ */

.head-nav__apartments {
  justify-self: start;
}

.head-nav__apartments:hover {
  border-bottom-color: transparent;
  opacity: 0.75;
}

.wordmark img { 
	display: block; 
	width: clamp(210px, 25vw, 350px); 
	height: auto; }

.head-nav__contact { 
	justify-self:end; 
	display:flex; 
	align-items:center; 
	gap:1.5rem; }  /*definiert den Abstand nav rechts zu anderen ggf.von .7 auf 1.5*/

/* Sichtbare Telefonnummer vor dem WhatsApp-Symbol */

.head-nav__phone-number {
    display: inline-block;
    white-space: nowrap;
}

/* Icons für WhatsApp, Telefon und E-Mail in Head 1 */

.navigation-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  opacity: 1;
  transition: opacity 0.3s ease;
}


/* Sichtbare Größe der Icons in Head 1 */

.navigation-icon img {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}


/* Icons werden beim Überfahren etwas transparenter */

.navigation-icon:hover {
  opacity: 0.65;
}

.icon-link { 
	display:inline-flex; 
	align-items:center; 
	gap:.45rem; 
	color:#fff; 
	font-size:.78rem; }

.icon-link b { 
	display:grid; 
	place-items:center; 
	width:2.45rem; 
	height:2.45rem; 
	border:1px solid rgba(255,255,255,.66); 
	border-radius:50%; }

.button { 
	padding:.85rem 1rem; 
	color:var(--dark); 
	background:var(--accent); 
	font-size:.75rem; font-weight:700; 
	text-transform:uppercase; 
	letter-spacing:.08em; }

.head-nav__menu-button { 
	display:none; 
	justify-self:end; 
	width:2.8rem; 
	height:2.8rem; 
	padding:.65rem; 
	border:1px solid rgba(255,255,255,.65); 
	border-radius:50%; 
	background:transparent; }

.head-nav__menu-button span:not(.sr-only) { 
	display:block; 
	height:1px; 
	margin:4px 0; 
	background:#fff; }

.head-hero__intro { 
	width:min(900px,88%); 
	margin-top:auto; }

.head-hero__intro h1 { 
	margin:0 0 2rem; }

.scroll-link { 
	display:inline-flex; 
	padding-bottom:.75rem; 
	border-bottom:1px solid rgba(255,255,255,.5); 
	transition: border-color 0.3s ease;
}

.scroll-link:hover {
  border-bottom-color: transparent;
  opacity: 0.75;
}



/* ==========================================================================
   3. CONTAINER BODY 1

   HTML-Seite: index.html
   Dieser Bereich gilt ausschließlich für den Container Body 1 der Startseite.
   Er gestaltet den hellbeigen Begrüßungs- und Einführungstextbereich.
   ========================================================================== */
.body-intro { padding-block:var(--space); background:var(--cream); }
.body-intro h2 { margin:0 0 clamp(2.5rem,6vw,5rem); }
.body-intro__columns { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem); }
.body-intro__columns p { margin:0; }
.text-link { display:inline-block; margin-top:3rem; padding-bottom:.65rem; border-bottom:1px solid; color:var(--dark); font-weight:700; }






/* ==========================================================================
   4. CONTAINER BODY 2

   HTML-Seite: index.html
   Dieser Bereich gilt ausschließlich für den Container Body 2 der Startseite.
   Er gestaltet den Bildslider mit vier Bildern. Auf Desktop-Geräten verändern
   die Bilder beim Überfahren mit der Maus ihre Breite und Position.
   ========================================================================== */
.image-slider { 
	display:flex; 
	height:clamp(420px,68vw,760px); 
	overflow:hidden; }

.image-slider__item { 
	position:relative; 
	flex:1 1 25%; 
	min-width:0; 
	overflow:hidden; 
	transition:flex var(--transition); }

.image-slider__item:hover,.image-slider__item:focus-visible { 
	flex:2.25 1 48%; }

						/*.image-slider__item img { height:100%; object-fit:cover; filter:brightness(.74); transition:transform 900ms ease,filter var(--transition); }
						.image-slider__item:hover img { transform:scale(1.035); filter:brightness(.9); }   dunkelt die Bilder zu stark ab*/

.image-slider__item img {
    height: 100%;
    object-fit: cover;
    filter: brightness(.70); /* Abdunklung der Bilder, filter: none wenn keine Abdunklung gewünscht */
    transition: transform 900ms ease, filter var(--transition);
}

.image-slider__item:hover img {
    transform: scale(1.035);
    filter: brightness(1); /* Abdunklung der Bilder, filter: none wenn keine Abdunklung gewünscht */
}

						/*.image-slider__item span { position:absolute; left:clamp(1.25rem,3vw,3rem); bottom:clamp(1.5rem,4vw,4rem); color:#fff; font-size:clamp(1.25rem,2.2vw,2.35rem); line-height:1.08; }*/

.image-slider__item span {
    position: absolute;
    left: clamp(1.25rem, 3vw, 3rem);
    bottom: clamp(1.5rem, 4vw, 4rem);
    color: #fff;

    font-family: "Caveat", cursive;
    font-weight: 400;
    font-size: clamp(1.8rem, 2.8vw, 3.1rem); /*font-size: clamp(2rem, 3.2vw, 3.5rem);  Schriftgröße im Bildslider*/
    line-height: 1;
}





/* ==========================================================================
   4A. CONTAINER BODY 2 – SECHS FERIENWOHNUNGEN

   HTML-Seite: ferienwohnungen.html

   Dieser Bereich gilt ausschließlich für den Bildslider mit den sechs
   Ferienwohnungen auf der Übersichtsseite ferienwohnungen.html.

   Auf Desktopgeräten öffnet sich die jeweils ausgewählte Ferienwohnung
   beim Überfahren mit der Maus. Bild und Wohnungsname führen als gemeinsamer
   Link zur jeweiligen Detailseite.

   Die Klassen des Vierbildsliders auf der Startseite werden hierdurch
   nicht verändert.
   ========================================================================== */


/* Gesamter Sechser-Slider */

.apartment-slider {
    display: flex;
    height: clamp(420px, 68vw, 760px);
    overflow: hidden;
}

/* Einzelne Ferienwohnung */

.apartment-slider__item {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    transition: flex-grow var(--transition);
}

/* Ausgewählte Ferienwohnung wird auf dem PC breiter */

.apartment-slider__item:hover,
.apartment-slider__item:focus-visible {
    flex-grow: 3.2;
}

/* Bilder der Ferienwohnungen */

.apartment-slider__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.70);
    transition:
        transform 900ms ease,
        filter var(--transition);
}

/* Ausgewähltes Bild wird heller und leicht vergrößert */

.apartment-slider__item:hover img,
.apartment-slider__item:focus-visible img {
    transform: scale(1.035);
    filter: brightness(1);
}

/* Gesamter Textbereich auf dem Bild */

.apartment-slider__caption {
    position: absolute;
    left: clamp(1.25rem, 2.5vw, 2.5rem);
    right: 1rem;
    bottom: clamp(1.5rem, 4vw, 4rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--white);
}


/* Name der Ferienwohnung in Caveat */

.apartment-slider__name {
    font-family: "Caveat", cursive;
    font-weight: 400;
    font-size: clamp(1.8rem, 2.8vw, 3.1rem);
    line-height: 1;
}


/* Hinweis auf die anklickbare Wohnungsseite */

.apartment-slider__hint {
    margin-top: 0.7rem;
    font-family: var(--font-main);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;

    opacity: 0;
    transform: translateY(6px);
    transition:
        opacity var(--transition),
        transform var(--transition);
}


/* Hinweis erscheint auf dem PC beim Aufklappen */

.apartment-slider__item:hover .apartment-slider__hint,
.apartment-slider__item:focus-visible .apartment-slider__hint {
    opacity: 1;
    transform: translateY(0);
}





/* ==========================================================================
   5. CONTAINER BOTTOM 1

   HTML-Seite: index.html
   Dieser Bereich gilt ausschließlich für den Container Bottom 1 der Startseite.
   Er gestaltet den Abschlusstext auf graubraunem Hintergrund.
   ========================================================================== */
.bottom-message { 
	padding-block:var(--space); 
	background:var(--brown); }

.bottom-message h2 { 
	margin:0 0 3rem; }

.bottom-message .text-body-light { 
	max-width:100%; }




/* ==========================================================================
   5A. ANFAHRT UND IMPRESSUM (Bottom 1)

   HTML-Seite: anfahrt.html

   Dieser Bereich gestaltet ausschließlich den zweispaltigen Anfahrts- und
   Impressumsbereich der Seite anfahrt.html.
   ========================================================================== */


.legal-overview {
    padding-block: var(--space);
    background: var(--cream);
    color: var(--dark);
}


.legal-overview__intro {
    max-width: 1050px;
}


.legal-overview__intro h2 {
    max-width: 1050px;
    margin: 0 0 2rem;
}


.legal-overview__intro > p:last-child {
    max-width: 850px;
    margin: 0;
}


.legal-overview__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 5vw, 6rem);
    margin-top: clamp(4rem, 7vw, 7rem);
}


.legal-panel {
    padding-top: 1.75rem;
    border-top: 2px solid var(--accent);
    font-family: var(--font-main);
    font-size: 0.96rem;
    line-height: 1.62;
}


.legal-panel__eyebrow {
    margin: 0 0 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent);
}


.legal-panel h3 {
    margin: 0 0 2rem;
    font-family: var(--font-main);
    font-size: clamp(1.65rem, 2.4vw, 2.25rem);
    font-weight: 400;
    line-height: 1.15;
}


.legal-panel h4 {
    margin: 0 0 0.35rem;
    font-family: var(--font-main);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.legal-panel p,
.legal-panel address {
    margin-top: 0;
}


.legal-panel a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}


.legal-address {
    margin-bottom: 2rem;
    font-style: normal;
}


.directions-list {
    margin: 0;
    padding-left: 1.3rem;
}


.directions-list li {
    padding-left: 0.45rem;
    margin-bottom: 1rem;
}


.legal-note {
    margin: 2rem 0 0;
    padding: 1rem 1.2rem;
    border-left: 3px solid var(--accent);
    background: rgba(255, 255, 255, 0.38);
    font-size: 0.86rem;
    line-height: 1.55;
}


.imprint-group {
    margin-bottom: 1.7rem;
}


.imprint-group:last-child {
    margin-bottom: 0;
}



/* ==========================================================================
   5B. DATENSCHUTZHINWEISE

   HTML-Seite: anfahrt.html

   Dieser Bereich gestaltet ausschließlich die Datenschutzhinweise im
   Container Bottom 1. Die Schrift ist bewusst kleiner und dichter gesetzt.
   ========================================================================== */


.privacy-section {
    padding-block: clamp(5rem, 8vw, 8rem);
    background: var(--brown);
    color: var(--white);
}


.privacy-section__intro {
    max-width: 900px;
}


.privacy-section__intro h2 {
    margin: 0 0 1.5rem;
    font-family: var(--font-main);
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    font-weight: 400;
    line-height: 1.08;
}


.privacy-section__intro > p:last-child {
    max-width: 760px;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}


.privacy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.5rem, 5vw, 5.5rem);
    row-gap: 2.2rem;
    margin-top: clamp(3rem, 5vw, 5rem);
}


.privacy-block {
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.32);
    font-family: var(--font-main);
    font-size: 0.84rem;
    line-height: 1.52;
}


.privacy-block h3 {
    margin: 0 0 0.8rem;
    font-family: var(--font-main);
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.035em;
}


.privacy-block p {
    margin: 0 0 0.8rem;
}


.privacy-block p:last-child {
    margin-bottom: 0;
}


.privacy-block address {
    margin: 0 0 0.8rem;
    font-style: normal;
}


.privacy-block a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/* Liste der Social-Media-Plattformen in den Datenschutzhinweisen */

.privacy-platform-list {
    margin: 0 0 0.8rem;
    padding-left: 1.2rem;
}

.privacy-platform-list li {
    margin-bottom: 0.65rem;
}

.privacy-platform-list li:last-child {
    margin-bottom: 0;
}

.privacy-date {
    font-weight: 700;
    letter-spacing: 0.04em;
}








/* ==========================================================================
   6. CONTAINER BOTTOM 2

   HTML-Seite: index.html
   Dieser Bereich gilt ausschließlich für den Container Bottom 2 der Startseite.
   Er gestaltet den Footer mit Firmenschriftzug, Seitennavigation,
   Social-Media-Links, Anschrift und Copyright-Zeile.
   ========================================================================== */
.bottom-footer { 
  	padding:5rem 0 2rem; 
	background:var(--dark); 
	color:#fff; }

.bottom-footer__grid { 
	display:grid; 
	grid-template-columns:1.1fr 1fr auto; 
	gap:4rem; 
	align-items:start; }

/* Firmenschriftzug im Footer ... das Bild */
.footer-wordmark {
  	display: inline-block;
}
.footer-wordmark img {
  	display: block;
  	width: clamp(210px, 18vw, 280px);
  	height: auto;
}

/* Schrift unter dem SchriftzugBild, ... Größe und Abstand zu dem Bild */
.footer-wordmark__subtitle {
  	margin-top: 0.35rem;
  	margin-bottom: 0;
  	font-size: 0.95rem;
}


/* Navigation im Footer */

.bottom-footer__navigation {
  	display: flex;
  	flex-direction: column;
  	gap: 0.55rem;
  	font-size: .92rem;
}
.bottom-footer__navigation a:hover { 
	color:var(--accent); }

/* Entfernt den zusätzlichen unteren Abstand der allgemeinen Textklasse
   ausschließlich innerhalb der Footer-Navigation */

.bottom-footer__navigation .text-eyebrow-light {
  	margin: 0;
  	line-height: 1.4;
}


.bottom-footer__social { 
	display:flex; 
	gap:.65rem; }

						/*.bottom-footer__social a { display:grid; place-items:center; width:2.8rem; height:2.8rem; border:1px solid rgba(255,255,255,.5); border-radius:50%; font-size:.78rem; font-weight:700; }*/

/* Anklickbare Flächen der Social-Media-Icons in Bottom 2 */

.bottom-footer__social a {
  	display: inline-flex;
  	align-items: center;
  	justify-content: center;
  	width: 44px;
  	height: 44px;
  	opacity: 1;
  	transition: opacity 0.3s ease;
}

/* Sichtbare Größe der Social-Media-Icons in Bottom 2 */

.bottom-footer__social img {
  	display: block;
  	width: 32px;
  	height: 32px;
  	object-fit: contain;
}

/* Social-Media-Icons werden beim Überfahren transparenter */

.bottom-footer__social a:hover {
  	opacity: 0.65;
}

							/*.bottom-footer__legal { 
								display:flex; 
								justify-content:space-between; 
								gap:2rem; 
								margin-top:5rem; 
								padding-top:1.5rem; 
								border-top:1px solid rgba(255,255,255,.17); }*/

/* Unterste Footerzeile mit Copyright links und Adresse rechts */

.bottom-footer__legal {
  	display: flex;
  	justify-content: space-between;
  	align-items: flex-start;
  	gap: 2rem;
  	margin-top: 5rem;
  	padding-top: 1.5rem;
  	border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.bottom-footer__copyright {
  	text-align: left;
}

.bottom-footer__address {
  	text-align: right;
}

/* Kompakter Footer ausschließlich auf dem PC */

@media (min-width: 1101px) {

  .bottom-footer {
    padding-top: 3.5rem;  /*Abstand am Anfang des Footers*/
    padding-bottom: .8rem; /*Abstand am Ende des Footers*/
  }

  .bottom-footer__legal {
    margin-top: 3rem;   /* Abstand oberhalb der Linie */
    padding-top: 1rem;  /* Abstand unterhalb der linie */
    border-top-color: rgba(255, 255, 255, 0.28);
  }

}

/* ==========================================================================
   ANGEBOTE.HTML – AKTIONSPREISE UND SAISONPREISE

   Die folgenden Klassen gelten ausschließlich für die Seite angebote.html.

   Sie gestalten:
   - den Aktionspreisbereich mit sechs farbigen Angebotskarten
   - die regulären Saisonpreise
   - Servicepauschale, Parkkosten, Kurzaufenthalt und Kaution

   Die vorhandenen Bereiche der Startseite und der Ferienwohnungsübersicht
   werden dadurch nicht verändert.
   ========================================================================== */


/* ==========================================================================
   AKTIONSPREISE
   ========================================================================== */

.offers-section {
    padding-block: var(--space);
    background: var(--cream);
}

.offers-section__intro {
    max-width: 980px;
}

.offers-section__intro h2 {
    margin: 0 0 2.5rem;
}

.offers-section__intro .text-body-dark {
    margin: 0 0 1.25rem;
}

.offers-section__notice {
    max-width: 850px;
}


/* Raster mit sechs Angebotskarten */

.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-top: clamp(3.5rem, 7vw, 6rem);
}


/* Grundgestaltung einer Angebotskarte */

.offer-note {
    position: relative;
    min-height: 300px;
    padding: clamp(2rem, 3vw, 3rem);
    color: var(--dark);
    box-shadow:
        0 18px 35px rgba(49, 46, 42, 0.13),
        0 4px 10px rgba(49, 46, 42, 0.08);
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}


/* Kleiner transparenter Klebestreifen */

.offer-note::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 50%;
    width: 88px;
    height: 28px;
    background: rgba(255, 255, 255, 0.48);
    transform: translateX(-50%) rotate(-1deg);
}


/* Leichte individuelle Drehung der Post-its */

.offer-note:nth-child(odd) {
    transform: rotate(-0.7deg);
}

.offer-note:nth-child(even) {
    transform: rotate(0.7deg);
}

.offer-note:hover {
    transform: rotate(0) translateY(-6px);
    box-shadow:
        0 24px 45px rgba(49, 46, 42, 0.17),
        0 6px 14px rgba(49, 46, 42, 0.10);
}


/* Sechs aufeinander abgestimmte Post-it-Farben */

.offer-note--sand {
    background: #f1d9a9;
}

.offer-note--sage {
    background: #d5e1d5;
}

.offer-note--blue {
    background: #d5e2e9;
}

.offer-note--rose {
    background: #ead6d0;
}

.offer-note--dune {
    background: #e5ddc4;
}

.offer-note--lavender {
    background: #ddd8e6;
}


/* Texte innerhalb der Angebotskarte */

.offer-note__label {
    margin: 0 0 1rem;
    font: 700 0.76rem/1.2 var(--font-main);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.offer-note h3 {
    margin: 0 0 2.5rem;
    font: 400 clamp(2.2rem, 3.5vw, 3.6rem)/1 var(--font-main);
    letter-spacing: -0.035em;
}

.offer-note__period {
    margin: 0 0 1.25rem;
    font: 700 clamp(1rem, 1.4vw, 1.15rem)/1.45 var(--font-main);
}

.offer-note__price {
    margin: 0;
    font: 700 clamp(1.7rem, 2.5vw, 2.5rem)/1.1 var(--font-main);
}

.offer-note__regular {
    margin: 0.8rem 0 0;
    font: 400 0.9rem/1.4 var(--font-main);
    text-decoration: line-through;
    opacity: 0.72;
}

.offers-contact {
    margin-top: clamp(3.5rem, 7vw, 6rem);
}

.offers-contact p {
    margin: 0;
}


/* ==========================================================================
   SAISONPREISE UND ZUSATZKOSTEN
   ========================================================================== */

.prices-section {
    padding-block: var(--space);
    background: var(--brown);
    color: var(--white);
}

.prices-section__intro {
    max-width: 980px;
}

.prices-section__intro h2 {
    margin: 0 0 2.5rem;
}

.prices-section__intro .text-body-light {
    margin: 0;
    max-width: 900px;
}

.prices-section__validity {
    display: inline-block;
    margin: 1.5rem 0 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    font: 700 0.78rem/1.3 var(--font-main);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* Preisraster der sechs Ferienwohnungen */

.season-prices-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: clamp(3.5rem, 7vw, 6rem);
}

.season-price-card {
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.season-price-card__heading {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}

.season-price-card__heading h3 {
    margin: 0;
    font: 400 clamp(1.5rem, 2vw, 2rem)/1.1 var(--font-main);
}

.season-price-card__heading span {
    font: 700 0.78rem/1.2 var(--font-main);
    letter-spacing: 0.08em;
}

.season-price-card__prices {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-top: 1.5rem;
}

.season-price-card__prices div {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.season-price-card__prices span {
    font: 400 0.78rem/1.3 var(--font-main);
    color: rgba(255, 255, 255, 0.75);
}

.season-price-card__prices strong {
    font: 700 clamp(1.25rem, 1.8vw, 1.7rem)/1.1 var(--font-main);
}


/* Service und weitere Kosten */

.additional-costs {
    margin-top: clamp(4rem, 8vw, 7rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid rgba(255, 255, 255, 0.30);
}

.additional-costs__title {
    margin: 0 0 2.5rem;
    font: 400 clamp(1.8rem, 3vw, 3rem)/1.1 var(--font-main);
}

.additional-costs__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.additional-cost-card {
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
    background: rgba(255, 255, 255, 0.07);
}

.additional-cost-card p {
    margin: 0;
    font: 400 var(--body)/1.6 var(--font-main);
}

.additional-cost-card__label {
    margin-bottom: 0.7rem !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

.additional-cost-card__price {
    margin-bottom: 1.25rem !important;
    font-size: clamp(1.35rem, 2vw, 1.9rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}







/* ==========================================================================
   7. ANPASSUNGEN FÜR IPAD UND TABLET

   HTML-Seite: index.html
   Dieser Bereich gilt ausschließlich für die Container Head 1 und Bottom 2
   der Startseite, wenn die Bildschirmbreite höchstens 1100 Pixel beträgt.
   Er passt das Kontaktmenü und den Footer an iPad- und Tabletgrößen an.
   ========================================================================== */


@media (
	max-width:1100px) {
  
.head-nav { 
	grid-template-columns:1fr auto auto; }
  
.head-nav__contact { 
	position:absolute; 
	top:5.4rem; 
	right:0; 
	display:none; 
	flex-direction:column; 
	align-items:stretch; 
	min-width:240px; 
	padding:1.25rem; 
	background:rgba(49,46,42,.96); }
  
.head-nav__contact.is-open { 
	display:flex; } .head-nav__menu-button { 
	display:block; }
		
/* Sechs Ferienwohnungen auf iPad und Tablet: nur Ferienwohnungen.html
   zwei Bilder je Zeile, ohne Aufklappbewegung */

.apartment-slider {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    overflow: visible;
}

.apartment-slider__item,
.apartment-slider__item:hover,
.apartment-slider__item:focus-visible {
    height: 46vw;
    min-height: 300px;
}			
  
.bottom-footer__grid { 
	grid-template-columns:1fr 1fr; } .bottom-footer__social { 
	grid-column:1/-1; }
  
  
.navigation-icon img,
  
.bottom-footer__social img {
    width: 30px;
    height: 30px;
  }
		
/* Bedienhinweis auf Geräten ohne zuverlässiges Mouseover */

.apartment-slider__hint {
    opacity: 1;
    transform: none;
}		
		
/* angebote.html:
   Aktionspreise und Saisonpreise auf iPad und Tablet */

.offers-grid,
.season-prices-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}		
		
/* Anfahrt, Impressum und Datenschutz auf iPad und Tablet */

.legal-overview__grid {
    grid-template-columns: 1fr;
    gap: 3.5rem;
}

.privacy-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
}		
		
}






/* ==========================================================================
   8. ANPASSUNGEN FÜR HANDYS

   HTML-Seite: index.html
   Dieser Bereich gilt für die allgemeinen Seitenabstände sowie ausschließlich
   für die Container Head 1, Body 1, Body 2 und Bottom 2 der Startseite,
   wenn die Bildschirmbreite höchstens 767 Pixel beträgt.
   Er ordnet Navigation, Texte, Bildslider und Footer für Handydisplays neu an.
   ========================================================================== */

	
@media (max-width: 767px) {

  html {
    --padding: 1.25rem;
    --space: 5rem;
  }
	
.head-hero,.head-hero__content { 	
	min-height:760px; }
  
.head-hero__overlay-top {
    height: 24%; }

.head-hero__overlay-bottom-left {
  	inset: 0;
	background: linear-gradient(
		to top,
		rgba(20, 24, 24, 0.78) 0%,
		rgba(20, 24, 24, 0.58) 35%,
		rgba(20, 24, 24, 0.30) 58%,
		rgba(20, 24, 24, 0.12) 72%,
		rgba(20, 24, 24, 0.03) 84%,
		rgba(20, 24, 24, 0) 94%
	  );
}
	
.head-nav { 
	grid-template-columns:1fr auto; 
	gap:1rem; } .head-nav__apartments { 
	display:none; }
	
.wordmark { 
	 font-size:clamp(2rem,10vw,2.8rem); }
	
.head-nav__contact { 
	top:4.2rem; 
	left:0; 
	right:0; }
	
.head-hero__intro { 
	width:100%; } 
	
.body-intro__columns { 
	grid-template-columns:1fr; 
	gap:1.5rem; }
	
.image-slider { 
	display:grid; 
	height:auto; 
	overflow:visible; }
	
.image-slider__item,.image-slider__item:hover { 
	height:66vw; 
	min-height:280px; }
	
.bottom-footer__grid { 
	grid-template-columns:1fr; 
	gap:2.5rem; }
	
.bottom-footer__social { 
	grid-column:auto; }
	
							  /*.bottom-footer__legal { 
								  flex-direction:column; 
								  gap:.4rem; 
								  margin-top:3rem; }*/
	
.bottom-footer__legal {
  	flex-direction: column;
  	align-items: stretch;
  	gap: 0.4rem;
  	margin-top: 3rem;
}


.bottom-footer__copyright {
  	width: 100%;
  	text-align: center;
}


.bottom-footer__address {
  	width: 100%;
  	text-align: center;
}	
	
.navigation-icon img,
.bottom-footer__social img {
    width: 28px;
    height: 28px;
  }
	

	
/* Sechs Ferienwohnungen auf dem Handy: nur Ferienwohnungen.html
   eine Ferienwohnung je Zeile */

.apartment-slider {
    display: grid;
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
}

.apartment-slider__item,
.apartment-slider__item:hover,
.apartment-slider__item:focus-visible {
    height: 66vw;
    min-height: 280px;
}	
	
/* angebote.html:
 Aktionspreise, Saisonpreise und Zusatzkosten auf Handys */

.offers-grid,
.season-prices-grid,
.additional-costs__grid {
    grid-template-columns: 1fr;
}

.offer-note {
    min-height: 270px;
    transform: none !important;
}

.offer-note:hover {
    transform: translateY(-3px) !important;
}
	
/* Anfahrt, Impressum und Datenschutz auf dem Handy */

.legal-overview__intro h2 {
    margin-bottom: 1.5rem;
}

.legal-overview__grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 3.5rem;
}

.legal-panel {
    font-size: 0.91rem;
    line-height: 1.58;
}

.legal-panel h3 {
    margin-bottom: 1.5rem;
}

.privacy-section {
    padding-block: 4.5rem;
}

.privacy-grid {
    grid-template-columns: 1fr;
    row-gap: 1.8rem;
    margin-top: 3rem;
}

.privacy-block {
    font-size: 0.82rem;
    line-height: 1.5;
}	
	
}






/* ==========================================================================
   9. BARRIEREARME BEWEGUNGSEINSTELLUNG FÜR ALLE 10 HTML-SEITEN

   Dieser Bereich gilt für alle bewegten oder animierten Bestandteile aller
   10 HTML-Seiten. Er wird nur verwendet, wenn ein Besucher auf seinem Gerät
   die Systemeinstellung „Bewegung reduzieren“ aktiviert hat.
   ========================================================================== */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; } *,*::before,*::after { transition-duration:.01ms!important; }
}