/* ================================================
   TYPO / THEME SWITCHBOARD — ADD-ON (v2)
   (nach dem Haupt-CSS laden)
   ================================================ */

/* ! Hinweis:
   Falls du schon ein @charset ganz oben hast, dieses hier weglassen.
   @charset "utf-8";
*/

/* 0) FONTS: @font-face (zusätzlich zu Roboto_Condensed) */

@font-face {
  font-family: 'Lucky Fellas';
  src: url('SHARED/fonts/lucky_fellas/LuckyFellas.eot');
  src: url('SHARED/fonts/lucky_fellas/LuckyFellas.eot?#iefix') format('embedded-opentype'),
  url('SHARED/fonts/lucky_fellas/LuckyFellas.woff2') format('woff2'),
  url('SHARED/fonts/lucky_fellas/LuckyFellas.woff') format('woff'),
  url('SHARED/fonts/lucky_fellas/LuckyFellas.ttf') format('truetype'),
  url('SHARED/fonts/lucky_fellas/LuckyFellas.svg#LuckyFellas') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* 1) ZENTRALE VARIABLEN */
:root{
  /* Roboto Condensed – aus vorherigem Switchboard */
  --rc-regular: 'Roboto_Condensed_Regular', Arial, sans-serif;
  --rc-bold:    'Roboto_Condensed_Bold', Arial, sans-serif;
  --rc-italic:  'Roboto_Condensed_Italic', Arial, sans-serif;

  /* Headings-Font (jetzt English Roman) */
  --heading-font: 'Lucky Fellas', Arial, sans-serif;

  /* Theme-Farben laut neuem Style */
  --col-body:  #fffcf5; /* Text */
  --col-head:  #4d6257; /* Akzent/Heading */
  --col-light: #fffcf5;
  --col-dark: #ddbddb;
  --col-copyright: #fffcf5;
  
  --card-bg: rgba(255,255,255,0.7);
}

a:link,
a:visited,
a:hover,
a:active,
a:focus
{
	color: var(--col-head) !important;
}

/* 2) ROBOTO CONDENSED – VERKNÜPFUNGEN (unverändert, keine Duplikate) */
b, strong,
.wrap_floatingbutton > a,
.wrap_floatingbutton > a:hover,
.item_contextmenu,
.item_contextmenu > a,
#list_menu > li.menu_active,
#list_menu > li.menu_active > a,
#list_menu > li > ul > li > a:hover,
.team_headline,
.feature_link,
.booking_subline,
.booking_headline,
.item_product > h2,
.preline_content,
.headline_content,
.link_pixel,
.wysiwyg_button_feature{
  font-family: var(--rc-bold);
  color: var(--col-dark);
}

p,
#list_menu a,
#list_menu > li > a:hover,
#mobile_menu,
.wrap_booking > ul li,
.wrap_booking > ol li,
.booking_price,
.booking_label,
.wrap_text > ul li,
.wrap_text > ol li,
.wrap_text > ul > li > ul > li,
.wrap_text > ol > li > ol > li,
table,
.wrap_tables > table,
.item_aufzaehlungen,
.item_files,
#footer_copyright,
input[type='submit'],
button,
input[type='text'],
select,
textarea,
.field,
.input_label,
.checkbox_label,
.wysiwyg_button,
.wrap_module > ul,
.wrap_module > ul > li:nth-child(1),
.wrap_module > ul > li:nth-child(2) > ul,
.wrap_text_left > h2,
.wrap_text_right > h2,
.h2_content,
.item_chat_right,
.item_chat_left{
  font-family: var(--rc-regular);
}

.wrap_text_left,
.wrap_text_right
{
  background: rgba(0,0,0,0.5);
}

#wrap_hero{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 100%;
  z-index: 2;
  text-align: center;           /* zentriert inline/inline-block Kinder */
}

#wrap_hero .headline_hero{
  position: relative;
  display: inline-block !important;  /* überschreibt evtl. h1/h2 defaults/andere Regeln */
  width: auto !important;            /* verhindert 100% */
  margin: 0;                         /* auto nicht nötig, Parent zentriert */
  
  padding: 5px 15px;
  font-family: 'Rift_Soft_Bold', Arial, sans-serif;
  font-size: 3.5em;
  color: #fff;
  line-height: 1.5em;
  text-shadow: 0 0 5px rgba(0,0,0,0.3);
  background: var(--col-head);
  z-index: 1;
  top: -18px;
}

.preline_hero
{
  position: relative;
  font-family: 'Rift_Soft_Light', Arial, sans-serif;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  font-size: 2.5em;
  text-align: center;
  color: white;
  text-shadow: 0px 0px 5px rgba(0,0,0,0.3);
  z-index: 2;
}


/* 3) ITALIC-Fallback (selten genutzt) */
em, i{ font-family: var(--rc-italic); }

/* 4) ENGLISH ROMAN – HEADINGS & MENU ACTIVE */
h1{
position: relative;
top: -10px;
  font-family: var(--heading-font) !important;
  font-size: 1.5em;
  line-height: 1em;
  margin: 30px 0 20px 0;
  padding: 0px 0px 0px 0px;
  text-align: left;
  text-transform: none;
  color: var(--col-dark);
  display: inline;
}
@media screen and (min-width:1024px){
  h1{ font-size: 2.5em; margin: 0 0 30px 0; }
}

h2 {
  font-family: var(--heading-font) !important;
  font-size: 1.6em;
  line-height: 1em;
  padding: 0px 0px 5px 0px;
  text-align: left;
  text-transform: none;
  color: var(--col-head);
}

/* 5) THEME-FARBEN & var(--col-light)-HINTERGRUND */
body{
  background: var(--col-head);
  background-size: 100%;
  font-size: 1em;
  line-height: 1.4em;
  color: var(--col-body);
}

/* 6) LOGO-OVERRIDES */
#logo{
  background: url('../images/logo_mycoffee.png') 50% 0 no-repeat;
  background-size: 80px;
  position: relative;
  height: 80px;
  top: 8px;
}
.link_logo:link{ display: none; }
@media screen and (min-width:1024px){
  #logo{
	position: relative;
	background: url('../images/logo_mycoffee.png') 0 0 no-repeat;
	background-size: 230px;
	width: 230px;
	height: 230px;
	top: 10px;
	left: calc(50% - 115px);
	z-index: 5;
  }
  .link_logo:link{
  display: block;
  width: 170px; height: 170px;
  }
}

/* 7) MENÜ- & LINK-FARBEN (inkl. !important für verlässliche Overrides) */
.item_contextmenu{ color: var(--col-body) !important; }

#list_menu > li.menu_active,
#list_menu > li.menu_active > a:link{
  color: var(--col-dark) !important;
  font-family: var(--heading-font) !important;
}

.item_contextmenu > a:link,
.item_contextmenu > a:visited{ color: var(--col-body) !important; }

#list_menu > li > a:hover{ color: var(--col-body) !important; }
#list_menu > li.menu_active > a:hover{ color: var(--col-body) !important; }
#hamburger > a{ color: var(--col-body) !important; }

.footer_sociallink:link,
.footer_sociallink:visited{ color: var(--col-body) !important; }

#footer_copyright{ color: var(--col-copyright) !important; }

.link_pixel:link,
.link_pixel:visited{ color: var(--col-copyright) !important; font-family: var(--rc-regular); }

.link_copyright:link,
.link_copyright:visited{ color: var(--col-copyright) !important; font-family: var(--rc-regular); }

.container_hero
{
  background: transparent;
}

/* 8) BLOCK-HINTERGRÜNDE TRANSPARENT */
.block_feature,
.block_team,
.block_text,
.block_tables,
.block_gallery,
.block_gallery_alt,
.block_quote,
.block_module,
.block_contact,
.block_map,
.block_youtube,
.block_textimage,
.block_link_gallery,
.block_filelist,
.block_blog,
.block_cookies,
.block_product,
.block_testimonial,
.block_grid_gallery,
.block_image-feature{
  background: transparent;
}

.block_textimage{
  position: relative;
  margin: auto auto;
  width: 100%;
}

@media screen and (min-width:1024px) {
  .block_textimage{
  position: relative;
  margin: auto auto;
  width: 80%;
  }
}

@media screen and (min-width:1750px) {
  .block_textimage {
	width: 60%;
  }
}

#container_menu
{
  position: absolute;
  width: 100%;
  height:80px;
  top: 145px;
  z-index: 6;
}

#list_menu a
{
  color: var(--col-dark) !important;
}

.item_contextmenu > a:link,
.item_contextmenu > a:visited,
#footer_copyright
{
  font-family: var(--rc-regular);
}

.wysiwyg_button:link,
.wysiwyg_button:visited,
.wysiwyg_button:hover,
.wysiwyg_button:active,
.wysiwyg_button:focus
{
  background: var(--col-dark);
  font-family: var(--rc-regular);
  color: var(--col-light) !important;
}

.checkout_button_forward
{
  background: var(--col-head);
}

.wrap_image_right img,
.wrap_image_left img
{
	border-radius: 16px;
}

.product_image
{
  border-radius: 16px;
}

.popup_close
{
  top: 10px;
  right: 10px;
}

.list_gallery
{
  width: 60%;
}

.gallery_thumbnail
{
  border-radius: 16px;
}