@charset "UTF-8";

/* =========================================
   1. VARIABLEN & RESET
   ========================================= */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.05em;
    color: #333;
    background-color: #F5F5F5;
    margin: 0;
    padding: 0;
}

/* =========================================
   2. TYPOGRAFIE & BASIS
   ========================================= */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Archivo Black', sans-serif;
    font-weight: 400;
    margin: 0;
}
h1 { font-size: 200%; margin: 0 0 0.5em 0; }
h2 { font-size: 175%; margin: 0 0 0.5em 0; }
h3 { font-size: 150%; margin: 0 0 0.5em 0; }
h4 { font-size: 140%; margin: 0 0 0.5em 0; }
h5 { font-size: 130%; margin: 0 0 0.5em 0; }
h6 { font-size: 125%; margin: 0 0 0.5em 0; }
p { font-size: 100%; line-height: 1.5; margin: 0 0 1.5em 0; }

.gross1 { font-size: 130%; font-weight: 400; font-family: 'Archivo Black', sans-serif; }
.gross2 { font-size: 130%; font-weight: 400; font-family: 'Archivo Black', sans-serif; margin-bottom: 0; }
.NavStriche { font-size: 150%; font-weight: 700; }
.fett { font-size: 175%; font-family: 'Archivo Black', sans-serif; font-weight: 400; margin: 0; }
.fett700 { font-weight: 700; }
.fett600 { font-weight: 600; }
.fett500 { font-weight: 500; }
.fett400 { font-weight: 400; }

ul, ol, dl { font-size: 100%; line-height: 1.5; margin: 0 0 1.5em 0; }
ul { list-style-type: disc; list-style-position: inside; }
ol { list-style-type: decimal; }
li { font-size: 100%; line-height: 1.5; margin: 0; padding: 0; }

a.nohover { background-color: transparent; text-decoration: none; color: #000; outline: 0; }
a.keinunterstrich { text-decoration: none; outline: 0; }

.textgross { font-size: 2rem; font-weight: 700; }
.textklein { font-size: .7rem; }
.textrechts { text-align: right; }
.wordwrap-breakword { word-wrap: break-word; }

.lineheight10 { line-height: 1em; }
.lineheight12 { line-height: 1.2em; }
.lineheight15 { line-height: 1.5em; }
.lineheight18 { line-height: 1.8em; }
.lineheight20 { line-height: 2em; }

.grossuberschrift { font-size: 130%; margin-bottom: 1em; }

/* =========================================
   3. LAYOUT (Grid & Basis)
   ========================================= */
.container {
    min-height: 100vh; /* WICHTIG: min-height statt height! */
    display: grid;
    grid-template-rows: 5em 1fr;
    grid-template-columns: 0% 100% 0%;
    grid-gap: 1em 0;
}
header {
    background: white;
    grid-row: 1 / 2;
    grid-column: 2;
    text-align: center;
    padding: .5em;
    border-radius: 6px;
}
aside {
    grid-row: 1 / 2;
    grid-column: 1;
    text-align: left;
    padding: 0 1em;
}
aside ul { list-style-type: none; margin: 0; padding: 0; }
article {
    background: white;
    grid-row: 2 / 3;
    grid-column: 2;
    padding: 1em;
    border-radius: 6px;
}
footer {
    background: white;
    grid-row: 3 / 4;
    grid-column: 2;
    text-align: center;
    padding: 0em;
    border-radius: 6px;
}

/* =========================================
   4. KOMPONENTEN (Header, Menü, Buttons)
   ========================================= */

/* --- Neuer Header (Glas-Effekt) --- */
.site-header {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 900;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border-radius: 6px;
    grid-row: 1 / 2;
    grid-column: 2;
    padding: 0 !important;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1.5rem;
    height: 100%;
}

.header-actions { display: flex; align-items: center; gap: 1.5rem; }
.header-stats { display: flex; align-items: center; gap: 1rem; }

.headnticket {
    display: inline-flex;
    align-items: center;
    background-color: #A1E000 !important;
    color: #111 !important;
    text-decoration: none;
    border-radius: 8px;
    padding: 0.4rem 1rem !important;
    font-weight: 600;
    font-size: 1.1rem !important;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 4px 10px rgba(161, 224, 0, 0.3);
}

.headnticket:hover {
    background-color: #8ac000 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(161, 224, 0, 0.4);
}

.logo_head { width: 200px; height: 48px; background:url(/images/csvberlin.svg) left center no-repeat !important; background-size: contain !important; }

/* --- Neues Menü (Sidenav) --- */
.navmenu { font-size: 1.8rem !important; cursor: pointer; color: #333; transition: color 0.2s; margin: 0 !important; padding: 0 !important; }
.navmenu:hover { color: #FF530E; }

.sidenav {
    background-color: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: -5px 0 25px rgba(0,0,0,0.15);
    z-index: 1100 !important;
    padding-top: 80px !important;
    border-left: 1px solid rgba(255,255,255,0.5);
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    right: 0;
    overflow-x: hidden;
    transition: 0.5s;
}

.sidenav a {
    color: #2d3748 !important;
    font-size: 1.15rem !important;
    font-weight: 500;
    padding: 12px 15px 12px 25px !important;
    margin: 5px 20px;
    border-radius: 8px;
    transition: all 0.25s ease-in-out !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.sidenav a:hover { background-color: #f7fafc !important; color: #FF530E !important; transform: translateX(8px); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.sidenav .closebtn { color: #a0aec0 !important; font-size: 40px !important; padding: 0 !important; margin: 0 !important; top: 15px !important; right: 25px !important; background: transparent !important; justify-content: center; position: absolute; }
.sidenav .closebtn:hover { color: #e53e3e !important; transform: rotate(90deg) !important; background: transparent !important; box-shadow: none !important; }
.sidenav a[href*="logout"] { margin-top: 30px; border-top: 1px solid #edf2f7; border-radius: 0 0 8px 8px; color: #e53e3e !important; }
.sidenav input { margin: 3rem 0 0 2rem; }

/* Automatische Sidenav Icons */
.sidenav a[href*="start.php"]::before { content: "🏠"; font-size: 1.3rem; }
.sidenav a[href*="ansprechpartner.php"]::before { content: "👥"; font-size: 1.3rem; }
.sidenav a[href*="aufgaben.php"]::before { content: "✅"; font-size: 1.3rem; }
.sidenav a[href*="asset.php"]::before { content: "💻"; font-size: 1.3rem; }
.sidenav a[href*="gdoku.php"]::before { content: "📞"; font-size: 1.3rem; }
.sidenav a[href*="kunden.php"]::before { content: "🏢"; font-size: 1.3rem; }
.sidenav a[href*="abrechnung.php"]::before { content: "💶"; font-size: 1.3rem; }
.sidenav a[href*="history.php"]::before { content: "🗄️"; font-size: 1.3rem; }
.sidenav a[href*="wartungen.php"]::before { content: "🛠️"; font-size: 1.3rem; }
.sidenav a[href*="wissendb.php"]::before { content: "📚"; font-size: 1.3rem; }
.sidenav a[href*="logout"]::before { content: "🚪"; font-size: 1.3rem; }
.sidenav a.closebtn::before { content: "" !important; }


/* --- Legacy Header Parts (ausblenden, wenn nicht gebraucht) --- */
.flex-auto { display: flex; justify-content: space-between; align-items: center; }
.flex-auto-item { flex: 0 1 auto; }
.flex50rl { display: flex; justify-content: space-between; align-items: flex-start; }
.flex50rl-item { flex: 0 1 auto; }
.headsymbol img { width: 27px; height: 27px; margin: .3em 1rem 0 0; }
.headschrift { font-size: 135%; color: #FF530E; margin: .3em 1rem 0 0; }
.headaufgabe { display: inline-block; padding: .1em .5em .2em .5em; margin: 0; background-color: #FF70B0; color: white; text-align: center; text-decoration: none; border-radius: 5px; border: none; cursor: pointer; transition: background-color 0.3s; font-size: 150%; }
.headaufgabe:hover { background-color: #FF8FC1; }
.aufgabevorhanden { display: inline-block; padding: .3em 1em; margin: 0; background-color: #007BFF; color: white; text-align: center; text-decoration: none; border-radius: 5px; border: none; cursor: pointer; transition: background-color 0.3s; }
.aufgabevorhanden:hover { background-color: #0056b3; }


/* --- Buttons --- */
.button { width: auto; border-radius: .5rem; padding: .6rem 1rem; font-weight: 400 !important; margin: 0; box-shadow: none !important; cursor: pointer; }
.button:disabled { pointer-events: none; opacity: 0.5; }
.buttonsmall { width: auto; border-radius: .3rem; padding: .3rem .5rem; font-weight: 400 !important; margin: 0; box-shadow: none !important; cursor: pointer; }
.buttonsmall:disabled { pointer-events: none; opacity: 0.5; }

.graurahmen { background: Gainsboro; border: 1px solid Gainsboro; color: #000; }
.graurahmen:hover { background: Gainsboro; border: 1px solid #44E935; }
.graurahmen:active, .graurahmen:visited { background: #44E935; border: 1px solid #44E935; color: Black; }

.graunurrahmen { border: 1px solid Gainsboro; color: #000; }
.graunurrahmen:hover { border: 1px solid #44E935; }
.graunurrahmen:active, .graunurrahmen:visited { border: 1px solid #44E935; color: Black; }

.hellblaurahmen { background: LightBlue; border: 1px solid LightBlue; color: #000; }
.hellblaurahmen:hover { background: LightBlue; border: 1px solid #44E935; }
.hellblaurahmen:active, .hellblaurahmen:visited { background: #44E935; border: 1px solid #44E935; color: Black; }

.dexxblaurahmen { background: #149dd9; border: 1px solid #1a334a; color: #000; }
.dexxblaurahmen:hover, .dexxblaurahmen:active, .dexxblaurahmen:visited { background: #1a334a; border: 1px solid #1a334a; color: #FFF; }

.gruenrahmen { background: #22B814; border: 1px solid #22B814; color: #FFF; width: auto !important; }
.gruenrahmen:hover { background: #22B814; border: 1px solid #44E935; }
.gruenrahmen:active, .gruenrahmenvisited { background: #44E935; border: 1px solid #44E935; color: Black; }

.gelbrahmen { background: Gold; border: 1px solid Gold; color: Black; }
.gelbrahmen:hover { background: Gold; border: 1px solid SeaGreen; }
.gelbrahmen:active, .gelbrahmen:visited { background: SeaGreen; border: 1px solid SeaGreen; color: White; }

.hellgelbrahmen { background: #FFFFCC; border: 1px solid #FFCC33; color: Black; }
.hellgelbrahmen:hover, .hellgelbrahmen:active, .hellgelbrahmen:visited { background: #FFFF66; border: 1px solid #FFFF66; color: Black; }

.orangerahmen { background: DarkOrange; border: 1px solid DarkOrange; color: White; }
.orangerahmen:hover, .orangerahmen:active, .orangerahmenvisited { background: SeaGreen; border: 1px solid SeaGreen; color: White; }

.rotrahmen { background: FireBrick; border: 1px solid FireBrick; color: #FFF; }
.rotrahmen:hover, .rotrahmen:active, .rotrahmenvisited { background: SeaGreen; border: 1px solid SeaGreen; color: White; }

.pcvisitrahmen { background: #81642d; border: 1px solid #DF9707; color: Black; }
.pcvisitrahmen:hover, .pcvisitrahmen:active, .pcvisitrahmen:visited { background: #81642d; border: 1px solid #f7a70a; color: Black; }

.rdmtrahmen { background: #1f85eb; border: 1px solid #1270CE; color: white; }
.rdmtrahmen:hover, .rdmtrahmen:active, .rdmtrahmen:visited { background: #1f85eb; border: 1px solid #FAF605; color: Black; }

.serahmen { background: #f28700; border: 1px solid #525456; color: white; }
.serahmen:hover, .serahmen:active, .serahmen:visited { background: #f28700; border: 1px solid #D67600; color: Black; }

.dsrahmen { background: #b10a05; border: 1px solid #0d66b9; color: white; }
.dsrahmen:hover, .dsrahmen:active, .dsrahmen:visited { background: #b10a05; border: 1px solid #0B5499; color: Black; }

.sprahmen { background: #FA6742; border: 1px solid #6B6B6B; color: white; }
.sprahmen:hover, .sprahmen:active, .sprahmen:visited { background: #FA6742; border: 1px solid #6B6B6B; color: Black; }

.rerahmen { background: #b1ddf6; border: 1px solid #ffc73c; color: Black; }
.rerahmen:hover, .rerahmen:active, .rerahmen:visited { background: #b1ddf6; border: 1px solid #FFB700; color: Black; }

.isDisabled { color: currentColor; cursor: not-allowed; opacity: 0.5; text-decoration: none; }

.textbutton { width: auto; padding: .2rem; margin: 0; cursor: pointer; font: normal bold 1em/2em Arial,Helvetica,sans-serif; }
.durchsichtig { background-color: none; }
.durchsichtig::after { content: " >"; color: OrangeRed; }
.durchsichtig:hover { color: Green; background-color: White; }
.durchsichtig:active { color: White; background-color: Navy; border-radius: .3rem; }

/* =========================================
   5. FORMULARE
   ========================================= */
label { display: inline-block; padding: 1em 0 .5em 0; width: 95%; }
legend { background: #fff; padding: .6em; border: 2px solid lightgray; box-shadow: inset 2px 2px 3px rgba(0,0,0,0.1); border-radius: 3px; font-weight: 700; }
input, select, textarea { border: 2px solid lightgray; box-shadow: inset 1px 1px 3px rgba(0,0,0,0.1); border-radius: 5px; }
input:hover, select:hover, textarea:hover { background: LightYellow; border: 2px solid GreenYellow; box-shadow: 0 0 1em rgba(173, 255, 47, 0.5); }
input:focus, select:focus, textarea:focus, input:active, select:active, textarea:active { border: 2px solid lightgray; box-shadow: 0 0 1em rgba(15, 199, 255, 0.7); outline: none; }

input[type="checkbox"], div input[type="radio"] { width: auto; margin-right: .5rem; box-shadow: none; }
input[type="checkbox"]:focus { outline: none; }

input:valid, select:valid, textarea:valid { border: green 1px solid; }
input:invalid, select:invalid, textarea:invalid { border: #BF0000 1px solid; }

.formselect { width: 15em; height: 2.2em; }


/* =========================================
   6. SPEZIFISCHE MODULE (Dashboard, Listen, Assets)
   ========================================= */
.suche { margin: 0 0 1em 0; }
.suche select { width: 15em; height: 2.2em; }

.box { border-radius: .3em; border-width: 1px; border-style: solid; border-color: rgba(0,0,0,0.3); box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2); color: rgba(0,0,0,0.8); padding: 1em; margin: 0 0 1em; }
.box > :last-child { margin-bottom: 0; }
.boxueberschrift { border-radius: .3em; padding: 0.2rem 0.5rem; display: inline-block; }

.box1 { border-radius: .7rem; padding: 1rem; margin: 0 0 1rem 0; }
.box1 > :last-child { margin-bottom: 0; }
.box1:hover { background: Gold; color: #000; }

.scrollicon { text-align: center; text-decoration: none; cursor: pointer; width: 50px; height: 50px; border-radius: 50%; background: #ccc; opacity: .7; position: fixed; bottom: 180px; right: 17px; display: none; border: 1px solid #FFF; z-index: 9999; }
.scrollicon div { font-weight: 700; font-size: 28px; color: #000; padding-top: 12px; }

/* Service Preisliste */
.servicepreislisteoben { font-weight: 700; background: #ececec; margin-bottom: .5em; padding: .7em .1em .7em .1em; }
.servicepreisliste { border-bottom: solid 2px #ececec; margin-bottom: .5em; padding-bottom: .2em; }
.servicepreisliste2 { border-bottom: solid 5px #ececec; margin-bottom: 2em; padding-bottom: 2em; }
.servicepreislast { margin-bottom: 1em; padding-bottom: .2em; }
.servicepla { float: left; overflow: hidden; position: relative; width: 17em; font-weight: bold; margin-right: 1em; }
.servicepla > *:last-child { margin-bottom: 0; }
.serviceplb { float: left; overflow: hidden; position: relative; width: 15em; }
.serviceplb > *:last-child { margin-bottom: 0; }
.serviceplc { float: left; overflow: hidden; position: relative; width: 5em; text-align: right; }
.serviceplc > *:last-child { margin-bottom: 0; }
.servicepl1 { float: left; overflow: hidden; position: relative; width: 25em; margin-right: 1em; }
.servicepl1 > *:last-child { margin-bottom: 0; }
.servicepl2, .servicepl3, .servicepl4 { float: right; overflow: hidden; position: relative; width: 5em; text-align: right; }
.servicepl3, .servicepl4 { text-align: left; }
.servicepl2 > *:last-child, .servicepl3 > *:last-child, .servicepl4 > *:last-child { margin-bottom: 0; }
.servicepfeile { list-style-image: url(/images/icons/pfeil_rechts_klein.png); margin: 0; padding: 0; }
.servicepfeile li { line-height: 1.8; }

.ym-clearfix:before { content: ""; display: table; }
.ym-clearfix:after { clear: both; content: "."; display: block; font-size: 0; height: 0; visibility: hidden; }

/* Suchergebnisse (JS) */
.suchergebnisse { background: white; width: 25rem; max-width: 20rem; max-height: 50vh; overflow-y: auto; border: 1px solid #ccc; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 1000; }
.ergebnis { padding: 5px; border-bottom: 1px solid #eee; cursor: pointer; color: #000; }
.ergebnis:last-child { border-bottom: none; }
.ergebnis:hover { background-color: #e0e0e0; }
.ergebnis-trenner { padding: 5px; background-color: #EDED42; pointer-events: none; }

#vorschlagsliste { position: absolute; background-color: #fff; border: 1px solid #ccc; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 1000; max-width: 100%; max-height: 250px; overflow-y: auto; margin-top: 2px; }
.vorschlag { padding: 12px 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background 0.2s; }
.vorschlag:last-child { border-bottom: none; }
.vorschlag:hover, .vorschlag.highlighted { background-color: #e3f2fd !important; color: #1976d2; }

/* Dashboard Cards (Startseite / Tasks) */
.dashboard { display: flex; flex-wrap: wrap; gap: 2rem; }
.card { background: white; border-radius: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.1); flex: 1 1 48%; display: flex; flex-direction: column; max-height: 600px; overflow: hidden; }
.card-content { max-width: 100%; overflow-x: hidden; }
.card.klappbar .card-content, .card.klappbar.zugeklappt .card-content { display: none; }
.card.klappbar:not(.zugeklappt) .card-content { display: block; }
.card.klappbar:not(.zugeklappt) .card-header::after { content: " ▲"; font-size: 0.9em; color: #555; }
.card.klappbar.zugeklappt .card-header::after { content: " ▼"; font-size: 0.9em; color: #555; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; font-weight: bold; border-bottom: 1px solid #C7E3FF; background-color: #C7E3FF; }
.card-title { font-size: 1.1rem; display: flex; align-items: center; gap: 0.4rem; }
.card-option { display: flex; align-items: center; }
.card-option input[type="checkbox"] { cursor: pointer; }
.add-link { font-size: 1.4rem; text-decoration: none; color: #3f5765; transition: color 0.2s ease; }
.add-link:hover { color: #1D292F; }

.entry { display: flex; align-items: flex-start; padding: 0.7rem 0.5rem; border-bottom: 1px solid #f0f0f0; gap: 0.8rem; }
.icon { font-size: 1.5em; margin-right: 0.5em; flex-shrink: 0; }
.entry-info { flex-grow: 1; overflow: hidden; }
.entry-title-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.entry-title-text { font-weight: bold; margin-right: 1em; flex-grow: 1; min-width: 200px; }
.entry-title { font-weight: bold; margin-bottom: 0.2rem; }
.entry-sub { margin-top: 0.3em; font-size: 0.95em; color: #555; }
.wartung-eintrag button { font-size: 1em; cursor: pointer; white-space: nowrap; }
.expired .icon { content: "⏰"; }

/* Assets */
.asset-box { display: inline-block; padding: 3px; margin: 2px; background-color: #e0e0e0; border-radius: 3px; border: 1px solid #ccc; word-wrap: break-word; }
.autocomplete-list { border: 1px solid #ccc; max-height: 150px; overflow-y: auto; background-color: white; position: absolute; z-index: 1000; }
.autocomplete-item { padding: 5px; cursor: pointer; }
.autocomplete-item:hover { background-color: #f0f0f0; }
.autocomplete-item.highlighted { background-color: #e0e0e0; color: black; }

/* Tooltips */
.hovertext { position: relative; border-bottom: 1px dotted black; }
.hovertext:before { content: attr(data-hover); visibility: hidden; opacity: 0; width: 140px; background-color: black; color: #fff; text-align: center; border-radius: 5px; padding: 5px 0; transition: opacity 1s ease-in-out; position: absolute; z-index: 1; right: 0; top: 0; }
.hovertext:hover:before { opacity: 1; visibility: visible; }

/* =========================================
   7. UTILITY-KLASSEN (Hilfsklassen)
   ========================================= */

/* Farben & Text-Farben */
.farbegrau { background-color: grey; }
.weiss { color: #FFF; }
.hellgrau { color: #F6F8FD; }
.dgrau { color: #030; }
.schwarz { color: #000; }
.orange { color: #ef6c00; }
.gelb { color: #FCD514; }
.blau { color: #1160b3; }
.drot { color: #BF0000; }
.hellbraun { color: #C90; }
.gruen { color: #008500; }
.hellgruen { color: #00FF00; }
.schriftweiss { color: White !important; }

/* Status-Farben */
.success { background: #067D0A; color: #FFF; }
.info { background: NavajoWhite; color: black; }
.warning { background: #FCD516; }
.error { background: #c88; }
.gruen { background: LimeGreen; }
.grau { background: Silver; }
.rot { background: FireBrick; }

/* Hintergründe */
.hintergrundweiss { background: White; }
.hintergrundweissgrau { background: #F5F5F5; }
.hintergrundhellgrau { background: Gainsboro; }
.hintergrundgrau2 { background: #E4E4E4; }
.hintergrundgrau { background: Grey; }
.hintergrundhellgelb { background: #FFFFDB; }
.hintergrundhellgruen { background: #C2FFC2; }
.hintergrundhellbraun { background: #E8D1BA; }
.hintergrundhellrosa { background: #FFCCFF; }
.hintergrundhellblau { background: #BDD7FF; }
.hintergrundhellrot { background: #FF8080; }
.hintergrundhell2rot { background: #FF0A0A; }

.grauebox { background: #ccc; height: 100%; border-radius: 6px; }
.grauebox .gross1 { padding: 1em 1em 0em 1em; }
.grauebox .innertext { padding: 0em 1em 1em 1em; }
.graueboxunten { background: #8F0003; padding: .7em; text-align: right; color: #FFF; bottom: 0; border-radius: 0 0 6px 6px; }
.graueboxunten a { color: #FFF; background: transparent; text-decoration: none; }

/* Sichtbarkeit & Positionierung */
.nurduck { display: none; }
.displaynone { display: none; visibility: hidden; }
.floatrightresp { float: right; padding: 0em 0 1.5em 0; }
.floatrightresp img { padding: 0 0 0 2em; }
.floatrighttop { float: right; margin: 1em 0 0 2em; }
.floatrighttop img { width: 27px; height: 27px; margin-top: .3em; }
.floatrighttop span { font-size: 135%; color: #FF530E; margin-left: .5em; }
.floatright2 { float: none; overflow: hidden; position: relative; padding: 0 0 .5em 0; }
.floatleft2 { float: none; overflow: hidden; position: relative; padding: 0 0 .5em 0; }

/* Breiten (Width) */
.width100P { width: 100%; }
.width99 { width: 99%; }
.width50 { width: 50%; }
.width45 { width: 45%; }
.width40 { width: 40%; }
.width30 { width: 30%; }
.width20 { width: 20%; }
.width10 { width: 10%; }

.widthres50 { width: 50%; }
.widthres45 { width: 45%; }
.widthres40 { width: 40%; }
.widthres33 { width: 33%; }
.widthres25 { width: 25%; }

.width2rem { width: 2rem; }
.width3rem { width: 3rem; }
.width4rem { width: 4rem; }
.width5rem { width: 5rem; }
.width6rem { width: 6rem; }
.width7rem { width: 7rem; }
.width8rem { width: 8rem; }
.width10rem { width: 10rem; }
.width12rem { width: 12rem; }
.width15rem { width: 15rem; }
.width18rem { width: 18rem; }
.width20rem { width: 20rem; }
.width25rem { width: 25rem; }
.width30rem { width: 30rem; }

.widthmax2rem { max-width: 2rem; }
.widthmax3rem { max-width: 3rem; }
.widthmax5rem { max-width: 5rem; }
.widthmax7rem { max-width: 7rem; }
.widthmax10rem { max-width: 10rem; }
.widthmax12rem { max-width: 12rem; }
.widthmax15rem { max-width: 15rem; }
.widthmax18rem { max-width: 18rem; }
.widthmax20rem { max-width: 20rem; }
.widthmax25rem { max-width: 25rem; }
.widthmax30rem { max-width: 30rem; }

.widthmin1rem { min-width: 1rem; }
.widthmin2rem { min-width: 2rem; }
.widthmin3rem { min-width: 3rem; }
.widthmin4rem { min-width: 4rem; }
.widthmin5rem { min-width: 5rem; }
.widthmin6rem { min-width: 6rem; }
.widthmin10rem { min-width: 10rem; }
.widthmin11rem { min-width: 11rem; }
.widthmin12rem { min-width: 12rem; }
.widthmin15rem { min-width: 15rem; }
.widthmin18rem { min-width: 18rem; }
.widthmin20rem { min-width: 20rem; }
.widthmin25rem { min-width: 25rem; }
.widthmin30rem { min-width: 30rem; }

/* Höhen (Height) */
.height100p { height: 100%; }
.height1p5rem { height: 1.5rem; }
.height2rem { height: 2rem; }
.height3rem { height: 3rem; }
.height10rem { height: 10rem; }
.height11rem { height: 11rem; }
.height12rem { height: 12rem; }
.height13rem { height: 13rem; }
.height15rem { height: 15rem; }
.height16rem { height: 16rem; }
.height17rem { height: 17rem; }
.height18rem { height: 18rem; }
.height20rem { height: 20rem; }
.height23rem { height: 23rem; }

/* Runde Ecken */
.rundeecke0p3 { border-radius: .3rem; }
.rundeecke0p4 { border-radius: .4rem; }
.rundeecke0p5 { border-radius: .5rem; }
.rundeecke0p7 { border-radius: .7rem; }
.rundeecke0p8 { border-radius: .8rem; }
.rundeecke10 { border-radius: 1rem; }

/* Rahmen */
.border3px { border: 3px solid Silver; }
.borderbott1px { border-bottom: 1px solid grey; }
.borderbott3px { border-bottom: 3px solid grey; }
.borderbott5px { border-bottom: 5px solid grey; }
.bordertop { border-radius: .4rem; }

/* Abstände (Margin) */
.keinabsatz, .keinabsatzunten { margin-bottom: 0 !important; margin: 0 !important; }
.margintop03em { margin-top: 0.3em; }
.margintop05em { margin-top: 0.5em; }
.margintop1em { margin-top: 1em; }
.margintop15em { margin-top: 1.5em; }
.margintop2em { margin-top: 2em; }
.margintop3em { margin-top: 3em; }
.margintop4em { margin-top: 4em; }

.marginbott03em { margin-bottom: 0.3em; }
.marginbott05em { margin-bottom: 0.5em; }
.marginbott08em { margin-bottom: 0.8em; }
.marginbott1em { margin-bottom: 1em; }
.marginbott15em { margin-bottom: 1.5em; }
.marginbott2em { margin-bottom: 2em; }
.marginbott3em { margin-bottom: 3em; }
.marginbott4em { margin-bottom: 4em; }

.marginleft1em { margin-left: 1em; }
.marginleft15em { margin-left: 1.5em; }
.marginleft2em { margin-left: 2em; }
.marginleft3em { margin-left: 3em; }
.marginleft4em { margin-left: 4em; }

.marginright05em { margin-right: .5em; }
.marginright1em { margin-right: 1em; }
.marginright15em { margin-right: 1.5em; }
.marginright2em { margin-right: 2em; }
.marginright3em { margin-right: 3em; }
.marginright4em { margin-right: 4em; }

.margin1rem { margin: 1rem; }
.marginTop1rem { margin-top: 1rem; }
.marginBottom1rem { margin-bottom: 1rem; }
.marginLeft1rem { margin-left: 1rem; }
.marginRight1rem { margin-right: 1rem; }

/* Abstände (Padding) */
.padding02rem { padding: 0.2rem; }
.padding04rem { padding: 0.4rem; }
.padding05rem { padding: 0.5rem; }
.padding07rem { padding: 0.7rem; }
.padding08rem { padding: 0.8rem; }
.padding09rem { padding: 0.9rem; }
.padding1rem { padding: 1rem; }
.padding13rem { padding: 1.3rem; }

.paddingbott06rem { padding-bottom: .6rem; }
.paddingbott08rem { padding-bottom: .8rem; }
.paddingbott1rem { padding-bottom: 1rem; }

.paddingtop06rem { padding-top: .6rem; }
.paddingtop08rem { padding-top: .8rem; }
.paddingtop1rem { padding-top: 1rem; }

/* Flexbox System */
.flex-container, .flex-container-res-column, .flex-container-720-column, .flex-container-zb, .flex-containerB, .flex-containerC {
    display: flex; flex-direction: row; padding: 0; margin: 0; list-style: none; line-height: 1em;
}
.flex-container-column, .flex-container-column-start, .flex-container-column-end, .flex-container-column-res-end, .flex-container-column-720-end, .flex-container-cartsumme {
    display: flex; flex-direction: column; padding: 0; margin: 0; list-style: none; line-height: 1em;
}

.flex-containerB { margin: 0 0 1em 0; }
.flex-containerC { align-items: center; justify-content: flex-start; }

.flex-item, .flex-item2, .flex-itemC { flex: 0 1 auto; margin: 0; padding: 0; }
.flex-item:last-child, .flex-item2:last-child, .flex-itemC:last-child { margin-right: 0 !important; }
.flex-itemB { margin: 1em 2em 1em 0; }
.flex-itemB:last-child { margin-right: 0 !important; }
.flex-itemB2 { margin: 1em 2em 1em 0; }
.flex-itemB3 { margin: 0em 2em 0em 0; }
.flex-item2 { flex-grow: 1; flex-shrink: 1; }

.flex-order1 { order: 1; }
.flex-order2 { order: 2; }
.flex-order3 { order: 3; }
.flex-order4 { order: 4; }
.flex-item-1 { order: 2; background: white; }
.flex-item-2 { order: 1; }

/* Flex Basis Helpers */
.flex-item-20-ngrow { flex-basis: 20%; flex-grow: 0; flex-shrink: 1; }
.flex-item-25-ngrow { flex-basis: 25%; flex-grow: 0; flex-shrink: 1; }
.flex-item-30-ngrow { flex-basis: 30%; flex-grow: 0; flex-shrink: 1; }
.flex-item-40-ngrow { flex-basis: 40%; flex-grow: 0; flex-shrink: 1; }
.flex-item-50-ngrow { flex-basis: 50%; flex-grow: 0; flex-shrink: 1; }

.flex-item-20 { flex-basis: 20%; flex-grow: 1; flex-shrink: 1; }
.flex-item-25 { flex-basis: 25%; flex-grow: 1; flex-shrink: 1; }
.flex-item-30 { flex-basis: 32%; min-width: 10rem; flex-grow: 1; flex-shrink: 1; }
.flex-item-30:first-child, .flex-item-30:last-child { flex-grow: 0; }
.flex-item-35 { flex-basis: 35%; flex-grow: 1; flex-shrink: 1; }
.flex-item-40 { flex-basis: 40%; flex-grow: 1; flex-shrink: 1; }
.flex-item-45 { flex-basis: 45%; flex-grow: 1; flex-shrink: 1; }
.flex-item-50 { flex-basis: 50%; flex-grow: 1; flex-shrink: 1; }
.flex-item-60 { flex-basis: 60%; flex-grow: 1; flex-shrink: 1; }
.flex-item-70 { flex-basis: 70%; flex-grow: 1; flex-shrink: 1; margin: 0; padding: 0; }
.flex-item-80 { flex-basis: 80%; flex-grow: 1; flex-shrink: 1; }
.flex-item-90 { flex-basis: 90%; flex-grow: 1; flex-shrink: 1; }
.flex-item-100 { flex-basis: 100%; flex-grow: 1; flex-shrink: 1; }
.flex-item-40:last-child, .flex-item-45:last-child, .flex-item-50:last-child, .flex-item-60:last-child, .flex-item-70:last-child, .flex-item-80:last-child, .flex-item-90:last-child, .flex-item-100:last-child { margin-right: 0 !important; }

/* Flex Align & Justify */
.flex-justifycontent-flex-start, .flex-justifycontent-artsearch { justify-content: flex-start !important; }
.flex-justifycontent-flex-end { justify-content: flex-end !important; }
.flex-justifycontent-center { justify-content: center !important; }
.flex-justifycontent-space-between { justify-content: space-between !important; }
.flex-justifycontent-space-around { justify-content: space-around !important; }
.flex-justifycontent-space-evenly { justify-content: space-evenly !important; }

.flex-align-items-center { align-items: center; }
.flex-align-items-strech { align-items: stretch; }
.flex-align-items-space-between { align-items: space-between; }
.flex-align-items-flex-start { align-items: flex-start; }
.flex-align-items-flex-end { align-items: flex-end; }
.flex-align-items-baseline { align-items: baseline; }

.flex-shrink0 { flex-shrink: 0; }
.flex-shrink1 { flex-shrink: 1; }
.flex-shrink2 { flex-shrink: 2; }
.flex-shrink3 { flex-shrink: 3; }
.flex-grow0 { flex-grow: 0; }
.flex-grow1 { flex-grow: 1; }
.flex-grow2 { flex-grow: 2; }

.flex-align-content-flex-start { align-content: flex-start; }
.flex-align-content-flex-end { align-content: flex-end; }
.flex-align-content-center { align-content: center; }
.flex-align-content-space-between { align-content: space-between !important; }
.flex-align-content-space-around { align-content: space-around; }
.flex-align-content-space-evenly { align-content: space-evenly; }
.flex-align-content-stretch { align-content: stretch; }
.flex-align-content-start { align-content: start; }
.flex-align-content-end { align-content: end; }
.flex-align-content-baseline { align-content: baseline; }
.flex-align-content-first-baseline { align-content: first baseline; }
.flex-align-content-last-baseline { align-content: last baseline; }

.flex-wrap-nowrap { flex-wrap: nowrap; }
.flex-wrap-wrap { flex-wrap: wrap; }

.flex-gap02 { gap: .2rem; }
.flex-gap03 { gap: .3rem; }
.flex-gap05 { gap: .5rem; }
.flex-gap07 { gap: .7rem; }
.flex-gap1 { gap: 1rem; }
.flex-gap15 { gap: 1.5rem; }
.flex-gap2 { gap: 2rem; }
.flex-gap3 { gap: 3rem; }
.flex-gap4 { gap: 4rem; }
.flex-gap5 { gap: 5rem; }

.flex-item-align-self-auto { align-self: auto; }
.flex-item-align-self-flex-start { align-self: flex-start; }
.flex-item-align-self-flex-end { align-self: flex-end; }
.flex-item-align-self-center { align-self: center; }
.flex-item-align-self-baseline { align-self: baseline; }
.flex-item-align-self-stretch { align-self: stretch; }

/* Flexbox Tabellen */
.flex-table { display: flex; flex-direction: column; width: 100%; }
.flex-row { display: flex; width: 100%; }
.flex-row form { display: flex; flex: 1; width: 100%; box-sizing: border-box; border-radius: 5px; padding: .5rem 0 .4rem 0; }
.form .flex-cell { flex: 1; padding: .2rem; border: none; }
.flex-cell-head { font-weight: bold; background-color: #f4f4f4; }
.flex-table .flex-row:nth-child(odd) { background-color: #FFFFFF; }
.flex-table .flex-row:nth-child(even) { background-color: #F2F2F2; }
.flex-cell:hover, .flex-cell:active { background: none; }

/* =========================================
   AUFGABEN- UND WARTUNGS-LAYOUT
   ========================================= */

.w-row {
    background: #fff;
    border-left: 4px solid #66C4FF;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    margin-bottom: 0.8rem; /* Deutlich enger zusammen */
    padding: 0.6rem 1rem;
    transition: box-shadow 0.2s;
}

.w-row:hover {
    border-left: 4px solid #FF7F1C;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.w-header {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.w-id {
    margin-left: auto; /* Schiebt die ID ganz nach rechts */
    color: #a0aec0;
    font-size: 0.8rem;
}

.w-body {
    display: grid;
    grid-template-columns: 1fr auto auto; /* Text links, Dropdowns mitte, Buttons rechts */
    gap: 1rem;
    align-items: end; /* Alle Boxen unten bündig */
}

/* Die Textarea */
.w-text textarea {
    width: 100%;
    min-height: 2.4rem; /* Startet extrem kompakt als 1-Zeiler */
    padding: 0.4rem 0.6rem;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.w-text textarea:focus { border-color: #0382c2; outline: none; }

/* Die Dropdowns & Datum */
.w-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.w-controls select, .w-controls input[type="date"] {
    height: 2.4rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.9rem;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    background-color: #f8fafc;
    box-sizing: border-box;
}
.w-controls select:focus, .w-controls input:focus { background-color: #fff; border-color: #0382c2; }

/* Die Action-Buttons */
.w-actions {
    display: flex;
    gap: 0.3rem;
}

.w-actions button {
    background: #f7fafc;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 0.3rem 0.6rem;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.w-actions button:hover {
    background: #edf2f7;
    transform: translateY(-2px);
    border-color: #cbd5e0;
}

/* =========================================
   AUFGABEN-FILTER (Akkordeon / Aufklappfeld)
   ========================================= */

/* Die äußere Box */
.mobile-filter {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 0.8rem 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
}

/* Der anklickbare Titel (Summary) */
.mobile-filter-summary {
    font-weight: 600;
    font-size: 1.05rem;
    color: #3f5765;
    cursor: pointer;
    padding: 0.2rem 0;
    list-style: none; /* Entfernt das Standard-Dreieck in manchen Browsern */
    outline: none;
    display: flex;
    align-items: center;
}

/* Entfernt das Standard-Dreieck in Webkit-Browsern (Chrome/Safari) */
.mobile-filter-summary::-webkit-details-marker {
    display: none;
}

/* Optik, wenn das Akkordeon aufgeklappt ist */
.mobile-filter[open] .mobile-filter-summary {
    border-bottom: 1px dashed #cbd5e0;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    color: #FF530E; /* CSV Orange */
}

/* Der Flex-Container für die Formularfelder */
.flex-container-aufgaben {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
}

/* Einheitliche Höhe und Optik für Eingabefelder */
.flex-container-aufgaben input[type="text"],
.flex-container-aufgaben select {
    height: 2.6rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 0.95rem;
    box-sizing: border-box;
    width: 100%; /* Wichtig für das Flex-Grid */
    background-color: #f8fafc;
}

.flex-container-aufgaben input[type="text"]:focus,
.flex-container-aufgaben select:focus {
    background-color: #ffffff;
    border-color: #0382c2;
    outline: none;
}

/* Buttons explizit von den Eingabefeldern trennen, um Farben nicht zu überschreiben */
.flex-container-aufgaben button {
    height: 2.6rem;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.flex-container-aufgaben button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}




/* =========================================
   8. MEDIA QUERIES (Responsive)
   ========================================= */

/* Desktop Spezifika (min-width) */
@media screen and (min-width: 769px) {
    .flex-item-aufgaben {
        flex: 1 1 auto;
        min-width: 120px;
    }

    .sm-half {
        flex: 2 1 200px;
    }
}

/* Tablet Landscape & kleine Desktops (max 960px / 60em) */
@media screen and (max-width: 60em) {
    .container { min-height: 100vh; display: grid; grid-template-rows: 5em 1fr auto; grid-template-columns: 100%; grid-gap: 1em 0; }
    header { background: white; grid-row: 1; grid-column: 1; text-align: center; padding: .5em; }
    aside { grid-row: 3; grid-column: 1; text-align: center; padding: 1em; }
    article { background: white; grid-row: 2; grid-column: 1; padding: 1em; }
    footer { background: white; grid-row: 4; grid-column: 1; text-align: center; padding: 0 1em; }
    header .logo { width: 100px; float: left; }
    .logo_head { background:url(/images/csvberlin_quadrat.svg) left center no-repeat !important; background-size: contain !important; width: 60px; height: 60px; }

    /* Aufgaben Desktop/Tablet Grenze */
    .flex-container-aufgaben > .flex-item-aufgaben { flex: 1 1 calc(50% - .5rem); }
    .stay-full { flex: 1 1 calc(100% - .5rem) !important; }
}

/* Tablets Portrait (max 900px) */
@media screen and (max-width: 900px) {
    /* Kompakte Listen-Elemente umbrechen */
    .w-body {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }

    .w-controls {
        justify-content: space-between;
    }

    .w-controls select, .w-controls input[type="date"] {
        flex: 1 1 calc(50% - 0.5rem);
    }

    .w-actions {
        justify-content: flex-end;
        padding-top: 0.5rem;
        border-top: 1px dashed #edf2f7;
    }
}

/* Grosse Smartphones / Phablets (max 768px) */
@media screen and (max-width: 768px) {
    /* Header Anpassungen */
    .site-header { grid-column: 1; border-radius: 0; }
    .header-inner { padding: 0.5rem 1rem; }
    .header-actions { gap: 0.8rem; }
    .header-stats { gap: 0.5rem; }
    .headnticket { padding: 0.4rem 0.6rem !important; }

    /* Filter & Aufgaben Leiste umbrechen */
    .flex-container-aufgaben { gap: 0.5rem; }
    .sm-half { flex: 1 1 100%; }

    .sm-fuenftel:nth-of-type(2),
    .sm-fuenftel:nth-of-type(3) {
        flex: 1 1 calc(50% - 0.25rem);
    }
    .sm-fuenftel:nth-of-type(4),
    .sm-fuenftel:nth-of-type(5),
    .sm-fuenftel:nth-of-type(6) {
        flex: 1 1 calc(33.333% - 0.34rem);
    }
    .flex-container-aufgaben button {
        padding: 0.4rem 0.2rem;
        font-size: 0.85rem;
    }
}

/* Reguläre Smartphones (max 640px / 40em) */
@media screen and (max-width: 40em) {
    .container { grid-template-rows: 3em 1fr !important; align-items: center; grid-gap: .5em 0 !important; }
    article { padding: 0.5em !important; border-radius: 0 !important; }
    label { display: block; padding: 1em 0 .5em 0; width: 95%; }
    input { display: block; }
    fieldset { border: none; margin: 0; padding: 0; }

    h1 { font-size: 150% !important; }
    h2 { font-size: 140% !important; }
    h3 { font-size: 133% !important; }
    h4 { font-size: 127% !important; }
    h5 { font-size: 121% !important; }
    h6 { font-size: 115% !important; }

    .grauebox { margin-bottom: 2em; }
    .flex-itemB { margin: 1em 0; }
    header { height: 3rem !important; padding: .1em .5em !important; margin: 0 !important; }

    .flex-container-res-column, .flex-container-720-column { flex-direction: column !important; }

    .floatrightresp img { padding: 0; }
    .floatrighttop { margin: 1em 0 0 1.5em; }
    .floatrighttop img { width: 40px; height: 40px; }
    .navmenu { font-size: 30px !important; }

    .sidenav { padding-top: 15px; }
    .sidenav a { font-size: 18px; }
    .flex-containerC { list-style: none; }

    .headschrift, .headsymbol, .mobileweg { display: none !important; }

    /* Flex-Box Tabellen */
    .flex-table { display: flex; flex-direction: column; width: 100%; }
    .flex-row { display: flex; flex-wrap: wrap; }
    .flex-cell { flex: 0 1 auto; padding: 8px; margin: 2px; }

    /* Flex-Box Aufgaben Defaults */
    .flex-container-aufgaben { margin: 0 0; }
    .flex-container-aufgaben > .flex-item-aufgaben { flex: 1 1 100%; min-width: 0; }
    .flex-item-aufgaben input, .flex-item-aufgaben textarea, .flex-item-aufgaben select, .flex-item-aufgaben button { width: 100%; }

    .ergebnis, .ergebnis-trenner { padding: 10px !important; }
}

/* Druckansicht */
@media print {
    aside, .sidenav, .floatrighttop, footer, header { display: none; }
    h1 { font-family: Verdana, Geneva, sans-serif; color: #000; font-weight: 700; font-size: 2em; text-align: center; text-decoration: none; }
    .noprint { display: none; }
}