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

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

@font-face {
    font-family: 'Ubuntu Mono';
    src: url('fonts/UbuntuMono-Regular.eot');
    src: url('fonts/UbuntuMono-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/UbuntuMono-Regular.woff2') format('woff2'),
        url('fonts/UbuntuMono-Regular.woff') format('woff'),
        url('fonts/UbuntuMono-Regular.ttf') format('truetype'),
        url('fonts/UbuntuMono-Regular.svg#UbuntuMono-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu Mono';
    src: url('fonts/UbuntuMono-Bold.eot');
    src: url('fonts/UbuntuMono-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/UbuntuMono-Bold.woff2') format('woff2'),
        url('fonts/UbuntuMono-Bold.woff') format('woff'),
        url('fonts/UbuntuMono-Bold.ttf') format('truetype'),
        url('fonts/UbuntuMono-Bold.svg#UbuntuMono-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu Mono';
    src: url('fonts/UbuntuMono-BoldItalic.eot');
    src: url('fonts/UbuntuMono-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/UbuntuMono-BoldItalic.woff2') format('woff2'),
        url('fonts/UbuntuMono-BoldItalic.woff') format('woff'),
        url('fonts/UbuntuMono-BoldItalic.ttf') format('truetype'),
        url('fonts/UbuntuMono-BoldItalic.svg#UbuntuMono-BoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Ubuntu Mono';
    src: url('fonts/UbuntuMono-Italic.eot');
    src: url('fonts/UbuntuMono-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/UbuntuMono-Italic.woff2') format('woff2'),
        url('fonts/UbuntuMono-Italic.woff') format('woff'),
        url('fonts/UbuntuMono-Italic.ttf') format('truetype'),
        url('fonts/UbuntuMono-Italic.svg#UbuntuMono-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: #222222;
    font: 14pt 'Ubuntu Mono',Helvetica,sans-serif;
    margin: 0px; /* Aussenabstand */
    line-height: 16pt;
    text-align: justify;
    background-color: #2c2f30;
	background: url('images/bg-vollof.jpg');               /* Hintergrundbild */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}

b, strong { 
	color: #df4442; font-weight: 900; 
}

i, em { 
	color: #a32f2f; font-weight: 600; 
}

u { 
	color: #FFFFFF; font-weight: 600; text-decoration: underline; 
}

ul {
        list-style: none;
}

ol {
        list-style: hiragana;
}


#topnavi {
    height: 50px;
    position: relative;
    background-color: #a32f2f;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 1000;
}

#topnavi ul {
    list-style: none;
    display: flex;
	gap: 0px;
}

#topnavi ul li a {
	display: block;
    color: #f9ddde;
    font-family: "Splash", cursive;
    font-size: 20pt;
    text-align: center;
    padding: 8px 0;
    width: 220px;
    text-decoration: none;
	flex: none;
}
#topnavi a:hover {
    color: #000000;
}

#header-container {
    margin-top: 0px;
    height: 570px;
    background-image: url('images/bg-green.jpg');
    background-repeat: repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

#header-image {
    margin-top: 231px;
	width: 1180px;
    height: 800px;
    background-image: url('images/ag-vol-1.png');
    background-size: cover;
    background-position: center;
}

#main-container {
    position: relative;
    margin-top: 180px;
	padding-left: 31px;
    display: flex;
    justify-content: center;
    gap: 0;
    z-index: 2;
	background-image: url('images/bg-vollof.jpg') scroll no-repeat;
}

#sidebar {
    width: 264px;
    background-color: #f7d7d0;
    padding: 15px 0 50px 2px;
	margin-bottom: 50px;
    font-family: 'Ubuntu Mono', Verdana,Helvetica;
	font-size: 14pt;
	line-height: 16px;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	
}

#sidebar a {
    display: block;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 13pt;
    color: #922c22;
    padding: 2px 0;
    border-bottom: 1px dashed #819882;
    margin-bottom: 4px;
    text-decoration: none;
}

#sidebar a:hover {
    color: #3f5a50;
    border-bottom: 1px solid #3f5a50;
}





#sidebar h1 {
        font-family: "Splash", cursive;
        font-weight: 400;
        font-style: normal;
        font-size:26pt;
        color: #333333;
        text-transform: lowercase;
        text-align: center;
        padding-bottom: 20px;
        line-height: 16px;
        letter-spacing: 2px;
        margin: 5px;
        text-shadow: 1px 1px 1px #F82C27;
}

#sidebar::after {
    content: '';
    position: absolute;
    width: 125px;          /* Bildbreite */
    height: 200px;         /* Bildhöhe */
    bottom: 0;
    left: 0;
    background-image: url('images/sidebar-left.png'); /* relativ zur CSS-Datei */
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none; /* falls du vermeiden willst, dass man "draufklickt" */
    transform: translate(120%, -12%); /* optional: justierbar */
}

#content {
    width: 1146px;
    background-color: #f9f9f9;
    min-height: 400px;
	font-family: 'Ubuntu Mono',helvetica,arial;
    font-size: 13pt;	
    line-height: 14pt;
    margin-bottom: 50px;
    margin-top: -60px;
    padding: 15px 15px 30px 15px;
    text-align: left;
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	position: relative; /* wichtig für ::after */
    overflow: visible;
}

#content b, #content strong { 
	color: #e75059; font-weight: 900; 
}

#content i, #content em { 
	color: #456153; font-weight: 600; 
}

#content u { 
	color: #8e9e76; font-weight: 600; text-decoration: underline; 
}

#content a {
    color: #546d59;
    text-decoration: underline;
    font-family: 'Ubuntu Mono', sans-serif;
    transition: color 0.3s;
}

#content a:hover {
    color: #ffffff;
	background: -webkit-linear-gradient(#849a7b,#697c61,#4f6b5a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: normal;
}

#content::after {
    content: '';
    position: absolute;
    width: 220px;          /* Bildbreite */
    height: 300px;         /* Bildhöhe */
    bottom: 0;
    right: 0;
    background-image: url('images/content-after.png'); /* relativ zur CSS-Datei */
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none; /* falls du vermeiden willst, dass man "draufklickt" */
    transform: translate(30%, 30%); /* optional: justierbar */
}

#footer {
    height: 392px;
    background-image: url('images/footer-small.jpg');
	background-color: #1c1c1c; 
    background-repeat: no-repeat;
    background-position: center top;
    background-size:contain;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 15px 15px 30px 15px;
    box-sizing: border-box;
	border-top: 5px solid #e04543;
}

/* Neuer Textbereich mit Overlay */
.footer-text-overlay {
    background: rgba(0, 0, 0, 0.4); /* dunkles Overlay nur hinter Text */
    padding: 15px 25px;
    border-radius: 8px;
    color: #f5f5f5;
    font-size: 14px;
    line-height: 1.5;
    max-width: 90%;
    text-align: center;
}

.footer-text-overlay a {
    color: #86af84;
    font-weight: bold;
    text-decoration: none;
}

.footer-text-overlay a:hover {
    text-decoration: underline;
}

/* headlines
--------------------------------------------------------------------------- */

#content h1 {
  font-family: "Splash", cursive;
  font-weight: 400;
  font-style: normal;
color: #080b76;
line-height: 46px;
font-size: 44pt;
text-align: right;
text-transform: lowercase;
letter-spacing: -2px;
padding: 1px 0px 1px 0px;
margin: 15px 0px 10px 0px;
background: -webkit-linear-gradient(#f7d7d0,#ea8d90,#dc4846);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#content h1::first-letter {
  font-family: 'Ruritania';
  font-size: 60pt;
  text-transform: uppercase;
  background: linear-gradient(#fcf454,#f7d7d0,#ea8d90);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h2 {
    position: relative; /* wichtig für das ::before-Positionieren */
    font-size: 34pt;
    font-family: "Splash", cursive, Arial;
    letter-spacing: 1px;
    color: #ea8b92;
    font-weight: normal;
    padding: 10px 0px 2px 5px;
    text-transform: normal;
    text-align: center;
    margin: 35px 1px 10px 1px;
    height: 40px;

    background: linear-gradient(#a43030,#e04543,#ea7279);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


h3 {
        font-size:34pt;
        font-family: "Ruritania", cursive; Georgia;
	    letter-spacing: 1px;
        color: #87b085;
        font-weight:normal;
        padding: 20px 5px 20px 5px;
        border-bottom: 2px solid #222222;
        text-align: center;
        margin: 30px 1px 15px 1px;
        height: 42pt;
        background: linear-gradient(#819e82,#516756,#375445);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
}

h4 {
        font-size:26pt;
        font-family: 'Splash', cursive; Arial;
        letter-spacing: 1px;
        color: #475845;
        font-weight:normal;
        padding: 20px 5px 15px 5px;
        border-bottom: 2px solid #7e9683;
        text-align: center;
        margin: 20px 1px 10px 1px;
        text-shadow: 0 1px white, 0 1px #3f6250;
        height:30pt;
}

h5 {
        font-size:22pt;
        font-family: "Splash", cursive;
        letter-spacing: 1px;
        color: #a22e2e;
        font-weight:normal;
        padding: 5px;
	    margin-top: 20px;
		margin-bottom: 10px;
        border-bottom: 2px solid #FC0302;
        text-align: center;
        text-shadow: 0 1px white, 0 2px #777;
        height:26pt;
}

h6 {
        font-size:16pt;
   		font-family: 'Ubuntu Mono', Helvetica;
        letter-spacing: 1px;
        color: #222222;
        font-weight:normal;
        font-style:normal;
        padding: 5px;
	    margin-top: 20px;
		margin-bottom: 10px;
        border-bottom: 2px solid #FC0302;
        text-transform: uppercase;
        text-align: center;
        text-shadow: 0 1px white, 0 2px #777;
        height:20pt;
}

blockquote {
    margin: 5px;
    font-family: 'Ubuntu Mono', Helvetica;
    text-align: center;
    color: #FFFFFF;
    background-color: #f0b0b0;
    background-image: url("/images/Trenner-klein.png");
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: auto;
    background-blend-mode: overlay; /* für Transparenz-Effekt */
    border-left: 10px dotted #2a2e2f;
    border-right: 1px solid #e88e8b;
    border-top: 1px solid #e88e8b;
    border-bottom: 1px solid #e26766;
	padding-top: 10px;
    padding-bottom: 140px;
    padding-left: 10px; /* falls du minimalen Abstand zum Text willst */
    background-origin: padding-box;
    border-radius: 8px;
    width: 500px;
}

blockquote:before {
        content: open-quote;
        font-weight: bold;
        color: #E61E19;
        font-family: 'Ruritania', serif;
        font-size: 68px;
	    float:left;
}

blockquote:after {
        content: close-quote;
        font-weight: bold;
        color: #E61E19;
        font-family: 'Ruritania', serif;
        font-size: 68px;
        float:right;
}
blockquote b, strong {
        font-family:'Ubuntu Mono',Helvetica;
        color:#000000;
}
table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #e9e9e9; /* Rahmen um die Tabelle */
}

th {
    text-align: left; /* Linksbündig */
    font-size: 16pt;
    color: #000000;
    background-color: #cccccc;
    padding: 8px;
}

td {
    padding: 8px;
}

table, tr, td {
    background: transparent;
    font-family: 'Ubuntu Mono', Helvetica, Arial Narrow, Arial;
    color: #222222;
    font-weight: bold;
    border: 1px solid #e9e9e9; /* Rahmen um Zellen */
}


textarea {
    font-family: 'Ubuntu Mono', Helvetica;
    font-size: 12pt;
    line-height: 150%;
    text-align: center;
    color: #222222;
    margin: 0px;
    padding: 2px 2px;
    width: 320px;
    height: 100px;
    background: #D6D6D6;
    border: 2px #474747;
    align:center;
    -moz-border-radius: 20px;
}

input {
	color: #F82C27;
    border: 1px solid #F82C27;
    background:#ECECEC;
    font-size:12pt;
    font-family: 'Ubuntu Mono', Helvetica;
    height: 30px;
    width: 320px;
    margin: 1px 0px;
    padding: 2px;}
        -moz-border-radius: 20px;
}

input {
button-height: 34px;
}

.radio-wrap {
  display: inline-flex;
  align-items: center;
  margin-right: 20px;
  font-family: 'Ubuntu Mono', Helvetica;
  font-size: 12pt;
  color: #000;
}

.radio-wrap input[type="radio"] {
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  appearance: auto;
}

.radio-wrap span {
  margin-left: 5px; /* Optional: ganz enger Abstand */
  line-height: 1;
}