@charset "utf-8";

/* Basis Styles mit clamp() für automatische Skalierung */
body {
	margin: 0;
	padding: 0;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: clamp(14px, 2.5vw, 16px);
	color: #666;
    background: transparent;
    line-height: clamp(1.4, 1.6, 1.8);
}

.alert-dismissible .close {
    padding: clamp(0.35rem, 1vw, 0.45rem) clamp(1rem, 2vw, 1.25rem);
}

.custom-file-label::after,
.custom-file-label {
    padding: clamp(0.3rem, 1vw, 0.4rem) clamp(0.5rem, 1.5vw, 0.75rem);
    font-size: clamp(0.9rem, 2vw, 1rem);
}

.custom-select {
    font-size: clamp(0.9rem, 2vw, 1rem);
}

div.clear {
	clear: both;
}

div#content {
	min-height: clamp(200px, 50vh, 250px);
	padding: clamp(5px, 2vw, 10px);
	background: #FFF;
    max-width: 100%;
    overflow-x: hidden;
}

div#wrapper {
    box-shadow: 0 0 clamp(3px, 1vw, 5px) #333;
    max-width: 100%;
    overflow-x: hidden;
}

nav {
    width: 100%;
    overflow-x: auto;
}

ul.nav#headnav {
	margin: 0 auto;
	padding: 0;
	list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    min-width: min-content;
}

ul.nav#headnav li {
    flex: 1 0 auto;
	border-right: 1px solid #666;
    min-width: clamp(80px, 15vw, 120px);
}

ul.nav#headnav li a {
	display: block;
	padding: clamp(5px, 1.5vw, 7px) clamp(10px, 2vw, 15px);
	text-align: center;
    color: #FFF;
	text-decoration: none;
	font-size: clamp(11px, 2vw, 13px);
    white-space: nowrap;
}

ul.nav#headnav li span#headline {
	display: block;
	font-size: clamp(14px, 3vw, 16px);
	color: #FFF;
	font-weight: 700;
	padding: clamp(8px, 2vw, 10px) clamp(15px, 3vw, 20px);
    white-space: nowrap;
}

ul.nav#headnav li a.active,
ul.nav#headnav li a:hover:not(.active),
ul.nav#headnav li a:focus:not(.active),
ul.nav#headnav li .nav-link:hover:not(.active),
ul.nav#headnav li .nav-link:focus:not(.active) {
    background: #101010;
    color: #fff;
    border-color: #101010;
}

ul.nav#headnav li:first-child {
    border-left: none;
}

ul.nav#headnav li:last-child {
    border-right: none;
}

table.table {
	width: 100%;
	border: 1px solid #DDD;
	border-spacing: 1px;
	font-size: clamp(11px, 2vw, 13px);
}

div.footer {
    height: clamp(20px, 4vw, 25px);
	padding: 0;
}

div.footer a {
	color: #FFF;
	text-decoration: none;
	font-size: clamp(10px, 2vw, 12px);
}

div.footer ul {
    float: right;
	margin: 0;
	padding: 0;
	list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}

div.footer ul li {
    flex: 0 0 auto;
}

div.footer ul li a {
	display: block;
    padding: 0 clamp(6px, 1.5vw, 8px);
    line-height: clamp(20px, 4vw, 25px);
    border-left: 1px solid #666;
    white-space: nowrap;
}

div.footer ul li a.footer-current,
div.footer ul li a:hover,
div.footer a.sign-in:hover {
    background: #fff;
    color: #212121;
}

ul.tabmenu {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    gap: clamp(4px, 1vw, 6px);
}

ul.tabmenu li {
    flex: 0 0 auto;
}

ul.tabmenu li a {
    display: block;
    margin-right: clamp(4px, 1vw, 6px);
    padding: clamp(6px, 1.2vw, 8px) clamp(8px, 1.8vw, 12px);
    color: #666;
    font-weight: 700;
    border: 1px solid #DDD;
    border-bottom: 0;
    background: #EFEFEF;
    font-size: clamp(11px, 2vw, 13px);
    white-space: nowrap;
}

ul.tabmenu li a:hover,
ul.tabmenu li a.current {
    background: #DDD;
}

span#refreshBar {
	float: right;
	font-size: clamp(10px, 2vw, 12px);
    padding-top: clamp(3px, 1vw, 5px);
}

img.profil_bild {
	max-width: clamp(100px, 20vw, 180px);
	max-height: clamp(100px, 20vw, 180px);
	border: 1px solid #CCC;
    width: auto;
    height: auto;
}

table.popup-table td.popup-profil-bild {
	padding-top: clamp(3px, 1vw, 5px);
	vertical-align: top;
	width: clamp(70px, 12vw, 100px);
}

table.popup-table {
	margin: 0;
	padding: 0;
	width: 100%;
}

table.popup-table td.popup-desc {
	vertical-align: top;
    min-width: 150px;
}

table.popup-table td.popup-desc span.headline {
	display: block;
	margin-bottom: clamp(3px, 1vw, 5px);
	padding-bottom: clamp(1px, 0.5vw, 2px);
    font-weight: 700;
	border-bottom: 1px solid #CCC;
	font-size: clamp(12px, 2.2vw, 14px);
    word-break: break-word;
}

table.content tr.event-sendung {
    background: #FFF2E7;
}

.input-group {
    margin: clamp(2px, 0.5vw, 3px);
    padding: clamp(3px, 1vw, 5px);
    font-family: "Arial", sans-serif, "Verdana", sans-serif, "Helvetica", sans-serif;
}

select {
    padding: clamp(3px, 1vw, 4px) clamp(4px, 1vw, 5px);
}

input[type=text]:focus,
input[type=password]:focus,
input[type=file]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=search]:focus,
select:focus, textarea:focus {
    box-shadow: 0 0 clamp(2px, 0.5vw, 3px) yellow;
}

input[type=submit],
input[type=reset],
input[type=button] {
    padding: clamp(2px, 1vw, 3px) clamp(6px, 1.5vw, 8px);
    font-weight: 700;
    cursor: pointer;
    font-size: clamp(11px, 2vw, 13px);
}

span.event {
    display: block;
    padding: clamp(6px, 1.5vw, 8px);
    color: #A84;
    margin-bottom: clamp(6px, 1.5vw, 8px);
    text-align: center;
    background: #FFE;
    border-top: clamp(3px, 1vw, 5px) solid #FEC;
    border-bottom: clamp(3px, 1vw, 5px) solid #FEC;
    font-size: clamp(12px, 2.2vw, 14px);
}

span.event-Success {
    color: #537836;
    background: #EFE;
    border-color: #CEA;
}

span.event-Fail {
    color: #A42F2D;
    background: #FEE;
    border-color: #FDD;
}

a:hover {
    color: #44F;
}

h1.headline {
    margin: 0 0 clamp(6px, 1.5vw, 8px) clamp(2px, 0.5vw, 3px);
    padding-bottom: clamp(2px, 0.5vw, 3px);
    font-size: clamp(16px, 4vw, 20px);
    border-bottom: 1px dotted #CCC;
    word-break: break-word;
}

span.circle-red {
    border-radius: clamp(6px, 1.5vw, 8px);
    padding: clamp(1px, 0.5vw, 2px) clamp(3px, 1vw, 4px);
    font-weight: 700;
    background: #E00;
    font-size: clamp(9px, 1.8vw, 11px);
}

span.label {
    color: #FFF;
    font-weight: 700;
    padding: clamp(2px, 0.8vw, 3px) clamp(3px, 1vw, 4px);
    border-radius: clamp(2px, 0.8vw, 3px);
    background: #888;
    font-size: clamp(9px, 1.8vw, 11px);
}

span.label-red {
    color: #FFF;
    background: #C95A57;
}

span.label-orange {
    color: #FFF;
    background: #EF9C52;
}

span.label-green {
    color: #FFF;
    background: #5DC15D;
}

div.pagenav {
    float: right;
}

div.pagenav ul {
    margin: 0;
    padding: 0;
    height: clamp(18px, 4vw, 22px);
    list-style-type: none;
    border: 1px solid #CCC;
    display: flex;
}

div.pagenav ul li {
    float: left;
    border-left: 1px solid #CCC;
}

div.pagenav ul li:first-child {
    border: none;
}

div.pagenav ul li a {
    display: block;
    padding: 0 clamp(4px, 1.2vw, 6px);
    line-height: clamp(18px, 4vw, 22px);
    font-weight: bold;
    vertical-align: middle;
    cursor: pointer;
    font-size: clamp(10px, 2vw, 12px);
}

div.pagenav ul li a:hover,
div.pagenav ul li#currentpage {
    background: #EFEFEF;
}

.mod_tool {
    color: #000000;
    background: transparent;
    font-size: clamp(10pt, 2.5vw, 12pt);
}

.mod_tool:hover {
    color: #343a40;
}

.mod_tool-dark {
    transition: .1s;
    color: #ffffff;
    background: transparent;
    font-size: clamp(10pt, 2.5vw, 12pt);
}

.mod_tool-dark:hover {
    color: #dcdcdc;
}

.form-check-ab {
    position: relative;
    display: block;
    padding-left: clamp(1.25rem, 3vw, 1.75rem);
    padding-top: clamp(3px, 1vw, 5px);
}

/* Zusätzliche Optimierungen für alle Ansichten */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sendethema-container {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
}

.profil-container {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 2vw, 12px);
    align-items: flex-start;
}

/* Sicherstellen dass nichts verschwindet */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/* Mobile Optimierung ohne Media Queries - nur mit clamp */
nav {
    -webkit-overflow-scrolling: touch;
}

img {
    max-width: 100%;
    height: auto;
}

/* KORREKTUR: Tabellen Mindestbreite für sehr kleine Geräte reduzieren */
table {
    min-width: 300px; /* Statt 500px - angepasst für 394px Breite */
}

/* Spezielle Optimierung für sehr kleine Displays (394px wie Huawei P30) */
@media screen and (max-width: 400px) {
    table {
        min-width: 280px; /* Noch kleiner für sehr schmale Displays */
    }
    
    .table-container {
        margin: 0 -5px;
        padding: 0 5px;
    }
    
    img.profil_bild {
        max-width: clamp(80px, 25vw, 120px);
        max-height: clamp(80px, 25vw, 120px);
    }
    
    div#content {
        padding: 3px;
    }
    
    ul.nav#headnav li {
        min-width: 70px; /* Kleinere Navigationselemente */
    }
    
    ul.nav#headnav li a {
        padding: 4px 6px;
        font-size: 10px;
    }
    
    ul.nav#headnav li span#headline {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* Garantiert dass Profilbilder immer sichtbar sind */
.profil-bild-container {
    min-width: 80px;
    min-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Sicherstellen dass Sendethemen nicht abgeschnitten werden */
.sendethema-content {
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}

/* Print Styles */
@media print {
    div#wrapper {
        box-shadow: none;
    }
    
    ul.nav#headnav,
    div.footer,
    ul.tabmenu {
        display: none;
    }
    
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
    
    table.table {
        border: 1px solid black;
        min-width: auto; /* Für Druck zurücksetzen */
    }
    
    img.profil_bild {
        max-width: 150px;
        max-height: 150px;
    }
}