@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans/OpenSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.menu {background-color: #ffffff;}
.logo {float: left;}

.navbar {
 background-color: #ffffff;
  padding: 1rem 2rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/*
.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--hausraeumer-yellow);
  text-transform: uppercase;
  letter-spacing: 1px;
}*/

.navbar-nav .nav-link {
  color: var(--hausraeumer-blue);
  font-weight: 500;
  margin: 0 0.75rem;
  transition: color 0.2s ease-in-out;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--hausraeumer-yellow);
}

.navbar .btn-offer {
  background-color: var(--hausraeumer-yellow);
  color: var(--hausraeumer-blue);
  font-weight: 600;
  border-radius: 50px;
  padding: 0.4rem 1.2rem;
  transition: all 0.2s ease-in-out;
}

.navbar .btn-offer:hover {
  background-color: var(--hausraeumer-blue);
  color: #fff;
}
@media screen and (max-width: 860px) {
  .logo {max-width: 50%;}
  .navbar {padding: 1rem 0rem;}
}


body {
  background-color: #ffffff;
  color: var(--hausraeumer-text);
  font-family: 'Open Sans', sans-serif;
}
.footer {
  background-color: var(--hausraeumer-bg-light);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--hausraeumer-blue);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
h1 {margin-top: 80px;}
h2 {margin-top: 40px;}

a {
  color: var(--hausraeumer-blue);
  text-decoration: none;
}

a:hover {
  color: var(--hausraeumer-yellow);
}
img {max-width: 100%;height: auto;}


/* Primärer Marken-Button */
.btn-yellow, .btn-primary, ul.tinyaccordion>li {
  background-color: var(--hausraeumer-yellow);       /* Marken-Gelb */
  color: var(--hausraeumer-blue);                 /* Dunkelblau für Text */
  font-weight: 600;
  font-size: 1rem;
  padding: 0.6rem 1.4rem;
  border: none;
  /* border-radius: 30px;             sanft abgerundet */
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;

  display: inline-block;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  /* dezente Tiefe */
  transition: all 0.25s ease-in-out;
}

/* Hover-Zustand */
.btn-yellow:hover, ul.tinyaccordion>li:hover {
  background-color: var(--hausraeumer-blue);      /* Dunkelblau beim Hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);     /* leichter „Lift“-Effekt */
}
.btn-yellow:hover {
  color: #ffffff;                  /* Weißer Text */
}
/* Für dunklen Hintergrund (z. B. Footer oder Hero-Bereich) */
.btn-yellow.alt {
  background-color: var(--hausraeumer-blue);
  color: #fff;
}

.btn-yellow.alt:hover {
  background-color: var(--hausraeumer-yellow);
  color: var(--hausraeumer-blue);
}

/* Optional: beschränke Fließtextbreite für bessere Zeilenlänge */
.inhalt, .prose { margin: auto; }
.frame-type-textpic, header, ul, .foot, .team, .frame-type-form_formframework {max-width: 100ch;margin: auto;}
.frame-type-ce_container.frame-layout-0 {background: var(--hausraeumer-bg-light);padding: 140px 50px; margin: 50px auto; clip-path: polygon(0 20%, 100% 0%, 100% 80%, 0% 100%);}
.frame-type-ce_container.frame-layout-1 {background: var(--hausraeumer-bg-light);padding: 140px 50px; margin: 50px auto; clip-path: polygon(0 0%, 100% 20%, 100% 100%, 0% 80%);}
.frame-type-ce_container.frame-layout-2 {background: var(--hausraeumer-bg-light);padding: 60px 50px; margin: 50px auto; }

@media screen and (max-width: 860px) {
.frame-type-ce_container.frame-layout-0 {padding: 100px 10px; margin: 50px auto; clip-path: polygon(0 8%, 100% 0%, 100% 92%, 0% 100%);}
.frame-type-ce_container.frame-layout-1 {padding: 100px 10px; margin: 50px auto; clip-path: polygon(0 0%, 100% 8%, 100% 100%, 0% 92%);}  
}

.head  {max-width: 150ch;margin: auto;}

/* Akkordeon*/
.frame-type-list {background: var(--hausraeumer-bg-light); margin:60px auto; padding:40px 0;}
.tx-tinyaccordion-pi1 ul {margin: 20px auto 40px;}

ul.tinyaccordion>li h4 {font-size: 1.2rem; text-align: left; }
.acc-section {font-size: 0.9rem;text-align: left; }
.acc-section:hover {color: var(--hausraeumer-blue);}

/*
ul.tinyaccordion li:hover {
	background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%) !important;
	background-color:#e9e9e9;
}
ul.tinyaccordion li:active {
	position:relative;
	top:1px;
}
.acc-section { background-color:#ffffff !important; padding:0px 24px;}        

ul.tinyaccordion li li, ul.tinyaccordion li li:hover { background: none !important; background-color: transparent; border:none; cursor:auto; }
*/




.stoerer {border-top: #FFBF47 solid 5px; border-bottom: #FFBF47 solid 5px;}
.stoerer h2 {max-width: 915px;margin: 40px auto 20px;}

.ce-gallery {border-radius: .65rem;}
.logo .ce-gallery { border-radius: 0;}

.header {position: fixed; z-index: 1000; width: 100%;  }
.inhalt {padding-top: 80px;}

.foot {padding: 30px 0;margin-top: 60px;}

/* 3-Spalten-Liste mit Pfeilen */
.stoerer ul{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem 1.25rem;         /* Zeilen- und Spaltenabstand */
  list-style: none;
  margin: 20px auto 40px;
  padding: 0;
}

.stoerer ul li{
  position: relative;
  padding-left: 1.4rem;        /* Platz für Pfeil */
  line-height: 1.4;
  color: var(--stoerer-fg);
  break-inside: avoid;         /* verhindert Spaltenbrüche in Items */
}

/* Pfeil statt Bullet – robust & zugänglich */
.stoerer ul li::before{
  content: "➔";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  aria-hidden: true;           /* Deko */
}

@media screen and (max-width: 860px) {
.stoerer ul {grid-template-columns: auto;}
}

.team .frame-layout-0 {float: left; margin-right:5px;}
.team .frame-layout-0 img {width:200px; height:auto;border-radius: 100px; border: 2px solid #fff;}
.team .ce-above .ce-gallery {margin-bottom: 0px;}
.team .ce-bodytext {text-align: center;}
.team::after { content: ""; display: block; clear: both;}

/* =========================
   Kacheln Preise
   ========================= */
.kacheln {margin: 60px auto;max-width: 100ch;}
.row.kacheln{
  --tile-bg: var(--surface);
  --tile-bd: var(--border);
  --tile-radius: 14px;
  --tile-shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* Spalten als Flex, damit die Kachel volle Höhe bekommt */
.row.kacheln .ce-col{

}

/* eigentliche Kachel (dein inneres .frame) */
.row.kacheln .ce-col > .frame.frame-type-text{
  background: var(--tile-bg);
  border: 1px solid var(--tile-bd);
  border-radius: var(--tile-radius);
  padding: clamp(16px, 2.5vw, 24px);
  box-shadow: var(--tile-shadow);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  width: 100%;

  flex-direction: column;
}

/* Hover: dezenter Lift + leicht betonte Rahmenfarbe */
.row.kacheln .ce-col > .frame.frame-type-text:hover{
  border-color: color-mix(in srgb, var(--primary) 35%, var(--tile-bd) 65%);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  transform: translateY(-2px);
}

/* Tastaturfokus sichtbar */
.row.kacheln .ce-col > .frame.frame-type-text:focus-within{
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Typo in den Kacheln */
.row.kacheln .frame.frame-type-text header{ margin-bottom: .5rem; }
.row.kacheln .frame.frame-type-text h2{
  margin: 0 0 .25rem;
  font-size: clamp(1.25rem, 1.2vw + 1rem, 1.6rem);
  color: var(--primary);
}
.row.kacheln .frame.frame-type-text p{
  margin: 0 0 .75rem;
  color: var(--text);
}

/* gleiche Höhe in allen Spalten */
.row.kacheln .ce-col .frame.frame-type-text{ height: 100%; }
.row.kacheln ul {margin: 0 0 1rem 0; padding-left: 1rem;}

@media screen and (max-width: 860px) {
h1, h2, .ce-textpic {padding: 0 10px;}
  .foot { padding: 30px 10px;}

.ce-gallery {float: none !important;}
}

/* Footer Formular */
.foot h2 {font-size:medium;margin-top: 0px;}
.form-label {visibility: hidden; display: none;}
.form-check {padding-left: 0.5em;}
.form-group {margin-bottom: 3px;}
.btn-toolbar {display: block;}
.actions {text-align: right;}