body {
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 0.02em;
    font-size: 1.1rem;
    margin: 50px;
    color: darkgrey;
    background-image: url("img/elements/bg-ukr.jpg");
    background-repeat: no-repeat;
    background-position: center top 70px; 
    background-size: contain; 
    min-height: 100vh; 
    overflow: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
    padding-bottom: 0;
    background-color: black;
	overflow-x: hidden;
}
/* We are not going back */
.box-height {
    position: relative;
    height: 250px; /* Höhe der Box anpassen */
}
.handwriting-container {
    position: absolute;
    top: 12%; /* Abstand von oben, je nach Layout anpassen */
    left: 8%; /* Abstand von links, je nach Layout anpassen */
    width: calc(100% - 40px); /* Breite der Textanimation anpassen */
    height: 100%;
    overflow: hidden;
}
.handwriting-text {
    font-family: "Satisfy", "Arial", sans-serif; /* Handschrift-Font */
    font-size: 90px;
    fill: #ff3300; /* Textfarbe */
}

.mask-rect {
    animation: revealText 3s linear forwards;
}

@keyframes revealText {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}


body.subpages { 
	background-image: url("img/elements/bg-ukr2.jpg");
 } 
body.subpages-full { 
	background-image: url("img/elements/bg-ukr-full.jpg");
	background-color: black;
 } 
 /* Klasse für 60% Opazität */
.opacity-60 {
    opacity: 0.6;
}
.opacity-100 {
    opacity: 1; /* Vollständig undurchsichtig */
}
.opacity-0 {
    opacity: 0; /* Vollständig transparent */
}
/* embedded Google Fonts */
/* latin-ext !!!! */ 
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/robotocondensed/ieVl2ZhZI2eCN5jzbjEETS9weq8-19y7DRs5.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/robotocondensed/ieVl2ZhZI2eCN5jzbjEETS9weq8-19K7DQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext !!!! */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/robotocondensed/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCoYb8td.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/robotocondensed/ieVi2ZhZI2eCN5jzbjEETS9weq8-32meGCQYbw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Satisfy';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/satisfy/v21/rP2Hp2yn6lkG50LoCZOIHQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


::selection {background: #fff; color: #a6a7a7;}
::-moz-selection {background: #fff; color: #a6a7a7;}	

/* slider titel */
h1 {    
	font-size: 1.8rem;
}
/* mandate/ Freiberufler*innen */
h2 {    
	font-size: 1.6rem;
}
/* subsite Überschriften */
h3 {    
	font-size: 1.3rem;
}
/* footer */
h4{
	font-size: 1.2rem;
}
h5{
	font-size: 0.9rem;
}
h6{
	font-size: 0.7rem;
}
.letspace {
	letter-spacing: 0.1em;
	word-spacing: 8px;
}
/* links */
a:link {
    color: #ff3300;
	text-decoration:none;
}
a:visited {
    color: #ff3300;
}
a:hover {
    color: #cc0000;
	text-decoration:none;
}
a:active {
    color: #ff3300;
}
a:focus { 
	outline:none; 
} 
/* organization */
.hyph {
hyphens: auto;
}
.float-left {
	float:left;
}
.float-right {
	float:right;
}
.clearfix  {
	clear:both;
}
.img-fluid {
	width: 100%; 
	height: auto; 
}
.img-bg {
  opacity: 0.5;
}
.font-weight-bold {	
  font-weight: 700;
}
.text-muted {
  --bs-text-opacity: 1;
  color: #c7c8c9 !important;
}
.btn-danger {
  background-color: #ff3300;
}
.accordion-button:not(.collapsed) {
  color: #cc3300;
  background-color: #ff330020;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}
.lheight {
  line-height: 1.6 !important;
}
.clone {
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}
.shadow {	
	box-shadow: 0 0 7px rgba(33,33,33,.4); 
	transition: box-shadow .3s;
}
.no-gutters {
  padding: 0 0 !important;
}
.nowrap{
	white-space: nowrap;
}
.btn-dark:hover {
  color: #ff3300 !important;
  background-color: #1c1f23;
  border-color: #1a1e21;
}
.border-top {
  border-top: 3px solid #cacaca !important;
}
.border-bottom {
  border-bottom: 2px solid #990000 !important;
}

.display-intro {
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 1.2;
	background-color: #33333380;
}
/* colors */

.bg-red {
	background: #990000;
}
.bg-lgrey {
	background: #f9f9f9;
}
.bg-lgrey2 {
	background: #f0f0f0;
}
.bg-grey {
	background: #cacaca;
}
.bg-dgrey {
	background: #5c5c5C;
}

.text-red {
	color: #990000;
}
.text-bright-grey {
	color: #cacaca;
}
.text-mid-grey {
	color: #adacac
}
.text-dark-grey {
	color: #5c5c5C;
}

/* bootie base orga */
#logo {
	width: 350px  !important;
	height: auto;
	border: 0px;
}
#logo-sm {	
	width: 220px !important;
	height: auto;
	pointer-events: none;
	border: 0;
}
.card {
	border: 0px solid rgba(0,0,0,.125);
}
.card-text {
	font-size:1em;	
}
/* navbar */
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav {
    color: #990000;	
}
.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show > .nav-link {
  color: #ff3300;	
}
.nav-link {
	font-size: 0.9rem;
}
.nav-link:hover {
	color: #ff3300 !important;
}
.menu-item {
	font-family: 'Libre Baskerville', serif;
}
.menu-item:link {
    color: #ff3300;
    text-decoration: none;
}
/* style footer */
a.footer-link {
	font-size: 1em;
	color: #5c5c5C;
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	line-height:1.8em;
}
.footer-link:hover {
	color: #990000;
}
/* Timeline */
.timeline-steps {
    display: flex;
    justify-content: center;
    flex-wrap: wrap
}

.timeline-steps .timeline-step {
    align-items: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 1rem
}


/* Extra small devices (portrait phones, less than 576px)*/
/* No media query since this is the default in Bootstrap------------------------------------------------ BLUE */
/* Small devices (576px and up)*/
@media (min-width: 576px) {
}
/* Medium devices (tablets, 768px and up)------------------------------------------------------------- GREEN */
@media (min-width: 768px) {
.box-height {
	height:400px;
}
.timeline-steps .timeline-step:not(:last-child):after {
	content: "";
	display: block;
	border-top: .25rem dotted #ff3300;
	width: 3.46rem;
	position: absolute;
	left: 7.5rem;
	top: .3125rem
}
.timeline-steps .timeline-step:not(:first-child):before {
	content: "";
	display: block;
	border-top: .25rem dotted #ff3300;
	width: 3.8125rem;
	position: absolute;
	right: 7.5rem;
	top: .3125rem
}
}
.timeline-steps .timeline-content {
	width: 10rem;
	text-align: center
}
.timeline-steps .timeline-content .inner-circle {
	border-radius: 1.5rem;
	height: 1rem;
	width: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: #3b82f6
}
.timeline-steps .timeline-content .inner-circle:before {
	content: "";
	background-color: #ff3300;
	display: inline-block;
	height: 3rem;
	width: 3rem;
	min-width: 3rem;
	border-radius: 6.25rem;
	opacity: .5
}
.handwriting-text {
    font-size: 80px;
}
}
/* Large devices (desktops, 992px and up)------------------------------------------------------------- YELLOW */
@media (min-width: 992px) {	
.nav-link {
	font-size: 0.8rem;
}
.mt-start {
	margin-top: 110px;
}
.box-height {
	height:500px;
}
}
/* Extra large devices (large desktops, 1200px and up)------------------------------------------------------ BROWN */
@media (min-width: 1200px) {
.nav-link {
	font-size: 0.9rem;
}
.box-height {
	height:600px;
}
}
/* XXL (large desktops, 1400px and up)-------------------------------------------------------------*/
@media (min-width: 1400px) {
.box-height {
	height:1000px;
}
}
/* XXXL (large desktops, 1920px and up)-------------------------------------------------------------*/
@media (min-width: 1920px) {
.box-height {
	height:1300px;
}
}
/* Zwischenstufe für Background-image-------------------------------------------------------------*/
@media (min-width: 2560px) {
	body {
    background-size: contain; /* Das Bild wird in den Container eingepasst, ohne beschnitten zu werden */
}
.box-height {
	height:1600px;
}
}
/* Ultra large devices (large desktops, 1920px and up)-------------------------------------------------------------*/
@media (min-width: 2560px) {
}