/* Bootstrap v5.3.x */


/* Fonts */
:root {
  --font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Colors */
:root {
  --color-default: #2b180d;
  --color-hellblau: #56b8e6;
  --color-dunkelblau: #1b2f45;
}

/* Smooth scroll behavior */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {font-family: var(--font-default);}

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

a:hover {
  color: #82cbed;
  text-decoration: none;
}

/*--------------------------------------------------------------
# Sections & Section Header
--------------------------------------------------------------*/
section {
  overflow: hidden;
  padding: 80px 0;
}

.section-header {
  text-align: center;
  padding-bottom: 30px;
}

.section-header h2 {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-header h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 2px;
  background: var(--color-hellblau);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-header p {margin-bottom: 0;}

/*-- Intro --*/
.hero {
  width: 100%;
  min-height: 100vh;
  background: url("../img/hausverkauf-ist-vertrauenssache.jpg") top center;
  background-size: cover;
  position: relative;
  padding: 120px 0;
  z-index: 3;
}

@media (min-width: 1034px) {
  .hero:after {
    position: absolute;
    content: "";
    width: 40%;
    background: var(--color-dunkelblau);
    top: 0;
    bottom: 0;
  }
}

.hero:before {
  position: absolute;
  content: "";
  background: rgba(27, 47, 69, 0.6);
  inset: 0;
}

@media (max-width: 1034px) {
  .hero:before {background: rgba(27, 47, 69, 0.7);}
}

.hero .container {
  z-index: 1;
}

@media (min-width: 1365px) {
  .hero {background-attachment: fixed;}
}

.hero h2 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.hero p {color: #fff;}

.hero a {color: #fff;}
.hero a:hover {color: #fff; font-weight: normal;} /*{color: var(--color-hellblau);}*/

.hero blockquote{
  color: #fff;
  padding-left: 20px;
  border-left: 2px solid var(--color-hellblau);
	font-weight: 600;
  margin: 40px 0;
}

.hero .badge {background: rgba(86, 184, 230, 0.8); font-size: 1.2rem;}

@media (max-width: 640px) {
  .hero h2 {font-size: 36px; line-height: 1;}
}

/*-- 3-Schritte --*/
.3-schritte h3 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-dunkelblau);
}

.3-schritte h4 {
  font-size: 18px;
  font-weight: 400;
  color: #29486a;
  font-family: var(--font-secondary);
}

/*--- Über mich ---*/
#ueber-mich {background-color: #f7f9fc;}

#ueber-mich img {border-radius: 50%;}

/*--- Rechtliches ---*/
.rechtliches {font-size: .8rem;}

.rechtliches h3 {
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-dunkelblau);
}

.rechtliches h4 {
  font-size: .85rem;
  font-weight: 400;
  color: var(--color-hellblau);
}

.impressum a {color: var(--color-dunkelblau);}
.impressum a:hover {font-weight: bold;}
.rechtliches a, .rechtliches a:hover {color: var(--color-dunkelblau);}