/* raleway-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/raleway-v34-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/raleway-v34-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* raleway-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/raleway-v34-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


:root {
  --color-dpsg-grey: #D5D9DF;
  --color-dpsg-blue: #003056;
  --color-dpsg-red: #810a1a;
  --color-woes: #ff6400;
  --color-jufis: #2f53a7;
  --color-pfadis: #00823c;
  --color-rover: #cc1f2f;
  --color-white: #fdfdfd;
  --color-white-opacity: rgba(253, 253, 253, 0.9);
  --color-text-dark: #282828;

  --height-navbar: calc(2 * 1.8em + 1em);
  --padding-section: 50px;
}

html {
  scroll-padding-top: calc(var(--height-navbar) + var(--padding-section))
}

body {
  background-color: var(--color-white);
  padding-top: var(--height-navbar);
  padding-bottom: 100px;
  font-family: 'Raleway', sans-serif;
  font-weight: 400;
  color: var(--color-text-dark);
  line-height: 26px;
}

:is(h1, h2, h3, h4, h5, h6) {
  font-weight: 600;
}

header {
  background-color: var(--color-white);
}

header .navbar-brand img {
  height: 70px;
  margin-left: 5px; 
}

header .navbar-toggler {
  margin-right: 5px;
}

.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover {
  background: var(--color-dpsg-blue);
  color: var(--color-white);
}

.navbar {
  padding: 0;
}

.navbar .navbar-nav .nav-link {
  padding: 1.8em 1.0em 1.8em 1.0em;
  text-transform: uppercase;
  color: var(--color-text-dark);
  font-size: 0.9em;
}

a {
  transition: color 400ms, background-color 400ms;
  color: var(--color-dpsg-red);
  overflow-wrap: break-word;
}

section {
  margin-bottom: 3px;
}

#socials {
  position: absolute;
  background: var(--color-white-opacity);
  right: 0;
  padding: 8px 6px 8px 8px;
  margin-top: 20px;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

#socials i {
  color: var(--color-text-dark);
}


#banner {
  overflow: hidden;
  height: 550px;
  background: url('images/banner-klein.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 85%;
  background-position-y: 90%;
  color: var(--color-white);
  /* padding-top: var(--height-navbar); */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#banner h1 {
  background: var(--color-dpsg-blue);
  box-shadow: 5px 5px 5px var(--color-text-dark);
  border-radius: 15px;
  padding: 5px;
}

#banner p {
  font-size: 1.4em;
}

section:not(#start-container) {
  padding-top: var(--padding-section);
  padding-bottom: var(--padding-section);
}

section h2 {
  text-align: center;
  font-size: 2.7em;
  margin-bottom: 70px;
  color: var(--color-dpsg-blue)
}

section h2::after {
  content: '';
  position: relative;
  display: block;
  width: 30px;
  height: 6px;
  background: var(--color-dpsg-blue);
  border-radius: 3px;
  top: 16px;
  left: calc(50% - 15px);
}

#pfadfinder-container {}

#nepomuk-container {
  background-color: var(--color-dpsg-grey);
  background-image: url('images/hintergrund-zelte.png');
  background-repeat: no-repeat;
}

#gruppen-container {
  background-image: url('images/hintergrund-feuer-klein.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 32%;
  background-position-y: center;
  color: var(--color-white-opacity);
}

#gruppen {
  color: var(--color-white-opacity)
}

#gruppen::after {
  background-color: var(--color-white-opacity)
}

#downloads-container {
  background-color: var(--color-dpsg-grey);
  background-image: url('images/hintergrund-zelte.png');
  background-repeat: no-repeat;
}

#kontakt-container {}


.gruppe {
  width: 100%;
  background: var(--color-white-opacity);
  margin: 25px 0 36px;
  padding: 20px 30px 20px 30px;
  position: relative;
  color: var(--color-text-dark);
  border-radius: 0 0 40px 0;
  /* margin-top:50px; */
}

.gruppe-lilie {
  padding-left: 86px;
}

.lilie {
  width: 85px;
  position: absolute;
  left: -13px;
  top: -15px;
  background: var(--color-dpsg-blue);
  border-radius: 50%;
  height: 85px;
  /* outline: 6px var(--color-white-opacity) solid; */
  display: flex;
  justify-content: center;
  align-items: center;
  padding:8px;
}

.lilie::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  outline: 6px var(--color-white-opacity) solid;
  clip-path: polygon(-15px -15px, 100px -15px, 100px 16px, 14px 16px, 14px 100px, -15px 100px);
}

.lilie-orange svg use {
  fill: var(--color-woes);
}

.lilie-blau svg use {
  fill: var(--color-jufis);
}

.lilie-gruen svg use {
  fill: var(--color-pfadis);
}

.lilie-rot svg use {
  fill: var(--color-rover);
}