/* 
Theme Name: Rügenferien Prora
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: webdesire
Author URI: https://www.webdesire.de
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/


/* ALLGEMEINES ########################################################################################################## */
/* ---------------------------------------------------------------------------------------------------------------------- */


@media (max-width: 1324px){
	.od {
		display:none;
	}
}


/* BUTTON ############################################################################################################# */
/* ---------------------------------------------------------------------------------------------------------------------- */

.buchung-menu.buchung-menu .elementor-nav-menu--main .elementor-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px !important;
  border-radius: 999px;
  background: #22303A;
  color: #FAF7F2;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  transition: background 0.18s ease; 
}

.buchung-menu.buchung-menu .elementor-nav-menu--main .elementor-item:hover,
.buchung-menu.buchung-menu .elementor-nav-menu--main .elementor-item:focus,
.buchung-menu.buchung-menu .elementor-nav-menu--main .elementor-item.highlighted,
.buchung-menu.buchung-menu .elementor-nav-menu--main .elementor-item.elementor-item-active {
  background: #3F6F86;
  color: #FAF7F2;
}

/* Pfeil nach unten */
.buchung-menu.buchung-menu .elementor-nav-menu--main .elementor-item::after {
  content: "\25BE";
  font-size: 11px;
  line-height: 1;
  opacity: 0.7;
}

/* Elementors eigenes Dropdown-Icon entfernen */
.buchung-menu.buchung-menu .elementor-nav-menu--main .sub-arrow {
  display: none;
}


/* ---------- Das Dropdown ---------- */

.buchung-menu.buchung-menu .sub-menu {
  width: 300px;
  min-width: 300px;
  padding: 0;
  margin-top: 12px !important;
  left: auto !important;
  right: 0 !important;
  background: #FFFFFF;
  border: 1px solid #E7E0D5;
  border-radius: 0;
  box-shadow: 0 22px 50px rgba(34, 48, 58, 0.18);
}

.buchung-menu.buchung-menu .sub-menu li a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-top: 1px solid #F0EAE0;
  background: none;
  color: #22303A;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.3;
  white-space: normal;
}

.buchung-menu.buchung-menu .sub-menu li a:hover {
  background: #FAF7F2;
  color: #22303A;
}

/* Pfeil rechts an jedem Wohnungs-Eintrag */
.buchung-menu.buchung-menu .sub-menu li a::after {
  content: "\2192";
  flex: none;
  color: #8B979C;
  font-size: 13px;
}


/* ---------- Die Label-Zeile ----------
   Erster Unterpunkt: „Termine direkt beim Vermieter“ */

.buchung-menu.buchung-menu .sub-menu li:first-child a {
  padding: 16px 20px 10px;
  border-top: none;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8B979C;
  pointer-events: none;
  cursor: default;
}

.buchung-menu.buchung-menu .sub-menu li:first-child a::after {
  content: none;
}


/* ---------- Telefon ---------- */

@media (max-width: 767px) {
  .buchung-menu.buchung-menu .elementor-nav-menu--main .elementor-item {
    justify-content: center;
    width: 100%;
  }

  .buchung-menu.buchung-menu .sub-menu {
    width: 100%;
    min-width: 0;
    margin-top: 8px;
    box-shadow: none;
  }
}

/* Breite auch am Elementor-Wrapper setzen */
.buchung-menu.buchung-menu .elementor-nav-menu--dropdown,
.buchung-menu.buchung-menu ul.sub-menu {
  width: 320px !important;
  max-width: 320px !important;
}

/* Label darf nicht Wort für Wort brechen */
.buchung-menu.buchung-menu .sub-menu li:first-child a {
  white-space: nowrap;
}

/* MAINMENU ############################################################################################################# */
/* ---------------------------------------------------------------------------------------------------------------------- */

.elementor-nav-menu .sub-menu {
  width: 300px;
  background: #fff;
  border: none;
  box-shadow: 0 22px 50px rgba(34,48,58,0.18);
  padding: 0;
}
.elementor-nav-menu .sub-menu li a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 13px 20px;
  border-top: 1px solid #f0eae0;
  color: #22303A;
  font-size: 15px;
}
.elementor-nav-menu .sub-menu li:first-child a {
  border-top: none;
}
.elementor-nav-menu .sub-menu li a:hover {
  background: #faf7f2;
}





/* ÜBERSCHRIFTEN ######################################################################################################## */
/* ---------------------------------------------------------------------------------------------------------------------- */

/* H1 Hero Eyebrow */

.hero-titel.hero-titel {
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 74px;
  line-height: 1.02;
  color: #FDFBF7;
  text-wrap: pretty;
}

.hero-titel .eyebrow {
  display: block;
  margin-bottom: 22px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #E7D9C4;
}

/* Tablet */
@media (max-width: 1024px) {
  .hero-titel.hero-titel {
    font-size: 52px;
  }
  .hero-titel .eyebrow {
    margin-bottom: 18px;
  }
}

/* Telefon */
@media (max-width: 767px) {
  .hero-titel.hero-titel {
    font-size: 38px;
    line-height: 1.08;
  }
  .hero-titel .eyebrow {
    margin-bottom: 14px;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: #F2E7D6;
  }
}



/* ---------- H1 Eyebrow Unterseiten (heller Hintergrund) ---------- */

.seiten-titel.seiten-titel {
  margin: 0;
  font-family: "Instrument Serif", serif;
  font-weight: 400;
  font-size: 62px;
  line-height: 1.05;
  color: #22303A;
  text-wrap: pretty;
}

.seiten-titel .eyebrow {
  display: block;
  margin-bottom: 22px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8B979C;
}

@media (max-width: 1024px) {
  .seiten-titel.seiten-titel { font-size: 46px; }
  .seiten-titel .eyebrow { margin-bottom: 18px; }
}

@media (max-width: 767px) {
  .seiten-titel.seiten-titel { font-size: 34px; line-height: 1.1; }
  .seiten-titel .eyebrow { margin-bottom: 14px; font-size: 10px; letter-spacing: 0.2em; }
}





/* H2 Eyebrow */

.eyebrow {
  display: block;
  margin-bottom: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8B979C;
}

.eyebrow-dark {
  display: block;
  margin-bottom: 14px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9FB0B8 ;
}


/* spezielle H2  */

@media (max-width: 1023px) {
  .abschnittsmarke,
  .abschnittsmarke * {
    font-family: "Instrument Serif", serif !important;
    font-size: 1.625rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #22303A !important;
  }
}




/* H4 */

.kategorie-titel .elementor-heading-title {
  margin:  0;
  padding-bottom: 12px;
  border-bottom: 1px solid #E2DACD;
  font-family: "JetBrains Mono", monospace;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6C7A83;
}

@media (max-width: 767px) {
   .kategorie-titel .elementor-heading-title {
     font-size: 12px;
}
}


/* LINKS ################################################################################################################ */
/* ---------------------------------------------------------------------------------------------------------------------- */

/* Link mit Pfeil */

.pfeil-link a {
  position: relative;
  display: inline-block;
  width: fit-content;
  padding-right: 1.5em;
  font-family: "DM Sans", sans-serif;
  font-size: 15px;
  line-height: 1.2;
  color: #3F6F86;
  text-decoration: none;
  border-bottom: 1px solid #C9D6DD;
  padding-bottom: 2px;
  cursor: pointer;
  /* Die Unterstreichung endet vor dem Pfeil – wie im Entwurf. */
  border-bottom-width: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}

/* Der Pfeil kommt aus dem CSS – nicht ins Textfeld tippen,
   sonst steht er doppelt da und wird mitgelesen. */
.pfeil-link a::after {
  content: "\2192";
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -65%;
  font-size: 1em;
  line-height: 1;
  transition: right 0.18s ease;
}

.pfeil-link a:hover,
.pfeil-link a:focus-visible {
  color: #22303A;
  border-bottom-color: #3F6F86;
}

.pfeil-link a:hover::after,
.pfeil-link a:focus-visible::after {
  right: -3px;
}

/* Tastaturbedienung: sichtbarer Fokusrahmen */
.pfeil-link a:focus-visible {
  outline: 2px solid #3F6F86;
  outline-offset: 3px;
  border-radius: 2px;
}




/* AKKORDEON ############################################################################################################ */
/* ---------------------------------------------------------------------------------------------------------------------- */

/* Linie ganz oben */
.akkordeon-linien .e-n-accordion {
    border-top: 1px solid #e2dacd;
}

/* Linie unter jedem Akkordeon-Eintrag */
.akkordeon-linien .e-n-accordion > .e-n-accordion-item {
    border: none !important;
    border-bottom: 1px solid #e2dacd !important;
    border-radius: 0 !important;
}

/* Zusätzliche Elementor-Rahmen entfernen */
.akkordeon-linien .e-n-accordion-item-title,
.akkordeon-linien .e-n-accordion-item > .e-con {
    border: none !important;
    border-radius: 0 !important;
}



/* VERLAUF HERO ######################################################################################################### */
/* ---------------------------------------------------------------------------------------------------------------------- */

.heroverlauf.heroverlauf {
  position: relative;
  overflow: hidden;
}

.heroverlauf.heroverlauf::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  pointer-events: none;
  z-index: 1;
  background-image:
    linear-gradient(90deg,
      rgba(16, 25, 31, 0.80) 0%,
      rgba(16, 25, 31, 0.62) 38%,
      rgba(16, 25, 31, 0.22) 68%,
      rgba(16, 25, 31, 0.10) 100%),
    linear-gradient(180deg,
      rgba(16, 25, 31, 0.35) 0%,
      rgba(16, 25, 31, 0.05) 45%,
      rgba(16, 25, 31, 0.30) 100%);
}

/* Der Inhalt muss über dem Verlauf liegen. */
.heroverlauf.heroverlauf > * {
  position: relative;
  z-index: 2;
}

/* Tablet und Telefon: Der Text steht am unteren Rand, nicht mehr
   links. Ein Verlauf von links würde die falsche Seite abdunkeln –
   deshalb nur noch von oben nach unten, unten deutlich kräftiger. */
@media (max-width: 1024px) {
  .heroverlauf.heroverlauf::before {
    background-image: linear-gradient(180deg,
      rgba(16, 25, 31, 0.38) 0%,
      rgba(16, 25, 31, 0.18) 28%,
      rgba(16, 25, 31, 0.62) 55%,
      rgba(16, 25, 31, 0.88) 78%,
      rgba(16, 25, 31, 0.94) 100%);
  }
}


/* BODY-FADING ########################################################################################################## */
/* ---------------------------------------------------------------------------------------------------------------------- */

body {
  animation: seite-einblenden 0.8s ease-out both;
}

@keyframes seite-einblenden {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Animation bei entsprechender Systemeinstellung deaktivieren */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }
}






.trennstrich-links.trennstrich-links {
  position: relative;
}

.trennstrich-links.trennstrich-links::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 34px;
  background: #E0D7C8;
}

@media (max-width: 767px) {
  .trennstrich-links.trennstrich-links::before {
    display: none;
  }
}





/* BUBBLES ############################################################################################################## */
/* ---------------------------------------------------------------------------------------------------------------------- */

.merkmale .elementor-icon-list-item {
  gap: 2px !important;
  padding: 9px 16px !important;
  border: 1px solid #E2DACD;
  border-radius: 999px;
  background: #FDFBF7;
  font-size: 15px;
  color: #22303A;
}

.merkmale .elementor-icon-list-items,
.merkmale .elementor-inline-items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 !important;
}

.merkmale .elementor-icon-list-item,
.merkmale .elementor-inline-item {
  margin: 0 !important;
}


/* LISTEN ############################################################################################################### */
/* ---------------------------------------------------------------------------------------------------------------------- */

.liste ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.liste li {
  margin: 0 0 9px 0;
  line-height: 1.5;
}

.liste li:last-child {
  margin-bottom: 0;
}


 ul.sl {
  margin-bottom: 2rem !important;
}



/* OSM-KARTE ############################################################################################################ */
/* ---------------------------------------------------------------------------------------------------------------------- */

.osm-karte  {
   height: 600px;
}

@media (max-width: 767px) {
  
   .osm-karte  {
   height: 400px;
  }
}


.karte-box {
  position: relative;
  height: 600px;
  border: 1px solid #E7E0D5;
  background: linear-gradient(140deg, #F4EFE6 0%, #DBE7EA 55%, #CFDFD9 100%);
}

.osm-karte {
  display: block;
  width: 100%;
  height: 600px;
  border: 0;
}

.karte-hinweis {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.karte-karton {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  max-width: 520px;
  padding: 36px 40px;
  background: #FDFBF7;
  border: 1px solid #E2DACD;
  text-align: center;
}

.karte-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8B979C;
}

.karte-karton p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #4B5A62;
}

.karte-karton label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 15px;
  line-height: 1.55;
  color: #4B5A62;
  text-align: left;
  cursor: pointer;
}

.karte-karton input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: #3F6F86;
}

.karte-box .karte-knopf {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
  padding: 15px 32px !important;
  border: none !important;
  border-radius: 999px !important;
  background: #22303A !important;
  color: #FAF7F2 !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition: background 0.18s ease;
}

.karte-box .karte-knopf span {
  font-size: 14px;
  opacity: 0.7;
}

.karte-box .karte-knopf:hover:not(:disabled) {
  background: #3F6F86 !important;
}

.karte-box .karte-knopf:disabled {
  background: #C9CFD2 !important;
  cursor: default;
}

@media (max-width: 767px) {
  .karte-box { height: 400px; }
  .osm-karte { height: 400px; }
  .karte-hinweis { padding: 20px; }
  .karte-karton { padding: 26px 22px; gap: 16px; }
}



/* BUTTON FORMULAR ###################################################################################################### */
/* ---------------------------------------------------------------------------------------------------------------------- */

.formstyles .elementor-button[type="submit"] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border: none;
  border-radius: 999px;
  background: #22303A;
  color: #FAF7F2;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease;
}

.formstyles .elementor-button[type="submit"]:hover {
  background: #3F6F86;
  color: #FAF7F2;
}

/* Pfeil rechts */
.formstyles .elementor-button[type="submit"]::after {
  content: "\2192";
  font-size: 14px;
  opacity: 0.7;
}

/* Elementor setzt links ein eigenes Icon-Feld – ausblenden */
.formstyles .elementor-button-icon {
  display: none;
}


.formstyles .elementor-field-group.elementor-field-type-submit {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

.formstyles .elementor-button[type="submit"] {
  width: auto !important;
}