/* Source Code Pro (normal und italic, variable Gewichtungen) */
@font-face {
    font-family: 'SourceCodePro';
    src: url('../Fonts/SourceCodePro-VariableFont.ttf') format('truetype');
    font-weight: 100 900; /* Unterstützt Gewichtungen von 100 (Thin) bis 900 (Black) */
    font-style: normal;
}

@font-face {
    font-family: 'SourceCodePro';
    src: url('../Fonts/SourceCodePro-Italic-VariableFont.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

/* Source Sans (normal und italic, variable Gewichtungen) */
@font-face {
    font-family: 'SourceSans';
    src: url('../Fonts/SourceSans3-VariableFont.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'SourceSans';
    src: url('../Fonts/SourceSans3-Italic-VariableFont.ttf') format('truetype');
    font-weight: 100 900;
    font-style: italic;
}

/* Globale Stile für Schriften */
body {
    font-family: 'SourceSans', sans-serif !important;
    font-weight: 400 !important; /* Regular */
}

strong, b {
    font-family: 'SourceSans', sans-serif !important;
    font-weight: 700 !important; /* Bold */
}

.thin-text {
    font-family: 'SourceSans', sans-serif !important;
    font-weight: 100 !important; /* Thin */
}

em, i {
    font-family: 'SourceSans', sans-serif !important;
    font-style: italic !important;
}

code {
    font-family: 'SourceCodePro', monospace !important;
    font-style: normal !important;
}

code.emphasis {
    font-family: 'SourceCodePro', monospace !important;
    font-style: italic !important;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important; /* Beispiel: Fett */
}



// Weitere CSS-Definitionen:

/* Raster */

.myrow {
  width:auto;
  -webkit-border-radius: 010px; 
  -moz-border-radius: 010px; 
   border-radius: 010px; 
   padding:2%; 
   margin: 2%;
   border: 2px solid; 
   border-color: rgb(192,192,192);
   font-family:"Source Sans 3 ExtraLight",sans-serif;
   font-weight:500;
   line-height:1.1;
   color:inherit;
}

.myrowheading {
  width:auto;
  -webkit-border-radius: 010px; 
  -moz-border-radius: 010px; 
   border-radius: 010px; 
   padding: 0 2% 2% 2%; 
   margin: 2%;
   border: 2px solid; 
   border-color: rgb(192,192,192);
   font-family: "Source Sans 3 ExtraLight",sans-serif;
   font-weight:500;
   line-height:1.1;
   color:inherit;
   background: lightgrey;
}

.myrownormal {
  width:auto;
  -webkit-border-radius: 010px; 
  -moz-border-radius: 010px; 
   border-radius: 010px; 
   padding: 0 2% 2% 2%; 
   margin: 2%;
   border: 2px solid; 
   border-color: rgb(192,192,192);
   font-family:"Source Sans 3 ExtraLight",sans-serif;
   font-weight:500;
   line-height:1.1;
   color:inherit;
}

.parentwrap > .myrownormal{

   border-color: rgb(102,205,0);
   background: rgba(102,205,0, 0.3);
   border-style: solid;
   border-width: 4px;
  font-family: "Source Sans 3 ExtraLight", sans-serif;

}

.parentwrap > .myrowheading {

   border-color: rgb(71,143,0);
   background: rgba(71,143,0, 0.5);
   border-style: solid;
   border-width: 4px;
  font-family: "Source Sans 3 ExtraLight", sans-serif;

}

.myrowinfo {
  width:auto;
  -webkit-border-radius: 010px; 
  -moz-border-radius: 010px; 
   border-radius: 010px; 
   padding:2%; 
   margin: 2%;
   border: 4px solid; 
   border-color: #ff8700;
   font-family:"Source Sans 3 ExtraLight",sans-serif;
   font-weight: 100;
   line-height:1.1;
   color:inherit;
   background: rgba(255,135,0, 0.2);  font-family: "Source Sans 3 ExtraLight", sans-serif;

}

.myrownotiz {
  width:auto;
  -webkit-border-radius: 010px; 
  -moz-border-radius: 010px; 
   border-radius: 010px; 
   padding:2%; 
   margin: 2%;
   border: 2px solid; 
   border-color: #bdbdbd;
   font-family:"Source Sans 3 ExtraLight",sans-serif;
   font-weight: 100;
   line-height:1.1;
   color:inherit;
   background: whitesmoke;
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.myrund {
  padding: 2%;
  background-color: rgb(192,192,192);
  -webkit-border-radius: 010px;
  -moz-border-radius: 010px;
  border-radius: 010px;
  border: 2px solid; 
  border-color: rgb(192,192,192);
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.myrund1 {
  padding: 2%;
  background-color: rgb(105,105,105);
  -webkit-border-radius: 010px;
  -moz-border-radius: 010px;
  border-radius: 010px;
  border: 2px solid;
  color: rgb(255,255,255);
  border-color: rgb(255,255,255);
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.myrund2 {
  padding: 2%;
  background-color: rgb(192,192,192);
  -webkit-border-radius: 010px;
  -moz-border-radius: 010px;
  border-radius: 010px;
  border: 4px solid;
  border-color: rgb(105,105,105);
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}



.myrow:before,
.myrow:after {
  content: " ";
  display: table;
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.myrow:after {
    clear: both;
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.myrowheading:before,
.myrowheading:after {
  content: " ";
  display: table;
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.myrowheading:after {
    clear: both;
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}


.myrownormal:before,
.myrownormal:after {
  content: " ";
  display: table;
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.myrownormal:after {
    clear: both;
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.myrowinfo:before,
.myrowinfo:after {
  content: " ";
  display: table;
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.myrowinfo:after {
    clear: both;
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.myrownotiz:before,
.myrownotiz:after {
  content: " ";
  display: table;
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.myrownotiz:after {
    clear: both;
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.tablewrapper {
  position: relative;
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.myContainer table {
    display: table !important;
    border: 2px solid #ff8700;
    border-collapse: collapse !important;
    border-spacing: 5px !important;
    padding: 2px !important;
    /* margin: 5px !important; */
    font-family: "Source Sans 3 ExtraLight", sans-serif !important;
}

/* 
.table {
    display:table !important;
    border: 2px solid #ff8700;
    border-collapse: collapse;
    border-spacing:5px;
    padding: 2px !important;
    // margin: 5px !important;
    font-family: "Source Sans 3 ExtraLight", sans-serif;
*/
   
}

.tablewrapper {

    border: 4px solid #ff8700;
    padding: 10px;
    margin: 3px auto 3px auto;
    width: 100%;
    font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.tablewrapper div.colspan {margin: 5px; font-size: large;}


.table div {
    display:table-row;
    border: 4px solid #ff8700;
    border-collapse: separate;
    padding: 10px !important;
    width: 100%;
   
}
.table div div {
    display:table-cell;
    width: auto;
}

.table div.caption { display: table-caption;}

.myinfobox { 
position: absolute;
display: none;
      min-width: 200;
      max-width: 400;
      width: auto;color: black;
background: white;
opacity: 0.8;
font: x-small;
border: 2px solid #ff8700;
padding: 5px;
 font-family: "Source Sans 3 ExtraLight", sans-serif;
-webkit-border-radius: 010px;
-moz-border-radius: 010px;
border-radius: 010px;


-webkit-transform: translate(20px, 10px);
-moz-transform: translate(20px, 10px);
-ms-transform: translate(20px, 10px);
-o-transform: translate(20px, 10px);
transform: translate(20px, 10px);
font-family: "Source Sans 3 ExtraLight", sans-serif;
left: auto;
right: auto;

}


.myboxwrap:hover > div.myinfobox{

      display: inline-block;

}


.columns {float: left;}


.whitetable {border: 2px solid white; border-collapse: collapse; border-spacing:2px; padding: 2px;}
.whiterow { padding: 2px;}
.whitecell {border: 2px solid white; padding: 5px; width: 60%;}


@media screen and (max-width:600px) {

/* Small */
.small-1 {width:96%;}
    
    .font-xl{font-size: 130%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
    .font-l{font-size: 120%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
    .font-ml{font-size: 110%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
    .font-n{font-size: 100%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
    .font-s{font-size: 90%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
  
.myrund1 {
  padding: 2%;
  background-color: rgb(105,105,105);
  -webkit-border-radius: 010px;
  -moz-border-radius: 010px;
  border-radius: 010px;
  border: 2px solid;
  color: rgb(255,255,255);
  border-color: rgb(255,255,255);
  margin-bottom: 1%;
 font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.tablewrapper {width: 100%;}
.leftcell {min-width: 20%; font-size: x-small;}
.rightcell {min-width: 10%; font-size: x-small;}


.myinfobox{

-webkit-transform: translate(0px, 20px);
-moz-transform: translate(0px, 20px);
-ms-transform: translate(0px, 20px);
-o-transform: translate(0px, 20px);
transform: translate(0px, 20px);
 font-family: "Source Sans 3 ExtraLight", sans-serif;
left: 100px;

}

}

@media screen and (min-width:600px) and (max-width:1000px) {

/* Medium */
.medium-1 {width:48%;}
.medium-2 {width:96%;}
    
    .font-xl{font-size: 160%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
    .font-l{font-size: 140%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
    .font-ml{font-size: 120%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
    .font-n{font-size: 100%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
    .font-s{font-size: 80%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
  
.myrund1 {
  padding: 2%;
  background-color: rgb(105,105,105);
  -webkit-border-radius: 010px;
  -moz-border-radius: 010px;
  border-radius: 010px;
  border: 2px solid;
  color: rgb(255,255,255);
  border-color: rgb(255,255,255);
  margin-bottom: 2%;
  font-family: "Source Sans 3 ExtraLight", sans-serif;
}

.tablewrapper {width: 100%;}
.leftcell {min-width: 55%; }
.rightcell {min-width: 45%;}


.myinfobox{

-webkit-transform: translate(0px, 20px);
-moz-transform: translate(0px, 20px);
-ms-transform: translate(0px, 20px);
-o-transform: translate(0px, 20px);
transform: translate(0px, 20px);
 font-family: "Source Sans 3 ExtraLight", sans-serif;
left: 100px;

}

}

@media screen and (min-width:1000px) {

/* Large */
.large-1 {width:19%;}
.large-2 {width:19%;}
.large-4 {width:58%;}    
.large-3 {width:96%;}
    
    .font-xl{font-size: 250%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
    .font-l{font-size: 200%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
    .font-ml{font-size: 150%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
    .font-n{font-size: 100%; font-family: "Source Sans 3 ExtraLight", sans-serif;}
    .font-s{font-size: 50%; font-family: "Source Sans 3 ExtraLight", sans-serif;}

.tablewrapper {width: 50%;}
  
}

.tablewrapper {width: 100%;}
.leftcell {min-width: 60%; }
.rightcell {min-width: 10%; }

// Für Studienberatungsseite

.rund {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 10px;
    margin: 5px;
    font-family: "Source Sans 3 ExtraLight", sans-serif;
}
.graugrau {
    background: rgb(192,192,192);
    font-family: "Source Sans 3 ExtraLight", sans-serif;
}
.grau {
    border: 2px solid;
    border-color: rgb(192,192,192);
    font-family: "Source Sans 3 ExtraLight", sans-serif;
}

ul.dropdown-menu ul.dropdown-menu ul.dropdown-menu {
    font-size: 0.5em !important;
}

/* ========================================
   Analytics / Auswertung Styles
   CSP-konform: Externe Styles statt inline
   ======================================== */

/* Container */
.analytics-container {
    margin-bottom: 30px;
}

/* Balkendiagramme */
.bar {
    display: inline-block;
    background: #4caf50;
    height: 20px;
    margin-right: 5px;
    min-width: 2px;
    vertical-align: middle;
}

.bar-ip {
    display: inline-block;
    background: #2196f3;
    height: 20px;
    margin-right: 5px;
    min-width: 2px;
    vertical-align: middle;
}

.bar:empty::after {
    content: " ";
}

.bar-ip:empty::after {
    content: " ";
}

/* Severity-spezifische Balken */
.bar-severity-0 {
    background: #28a745;
}

.bar-severity-1 {
    background: #ffc107;
}

.bar-severity-2 {
    background: #dc3545;
}

/* Severity-Zeilen-Hintergründe */
.severity-0 {
    background-color: #e8f5e8;
}

.severity-1 {
    background-color: #fff3cd;
}

.severity-2 {
    background-color: #f8d7da;
}

/* Buttons */
.refresh-btn {
    background: #007cba;
    color: white;
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px 5px;
}

.refresh-btn:hover {
    background: #005a87;
}

.toggle-btn {
    background: #4caf50;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 10px;
}

.toggle-btn:hover {
    background: #45a049;
}

.toggle-btn.active {
    background: #2196f3;
}

/* Chart-Container */
.chart-container {
    position: relative;
    height: 300px;
    margin: 20px 0;
}

.chart-container-horizontal {
    position: relative;
    height: 400px;
    margin: 20px 0;
}

.chart-toggle {
    margin: 10px 0;
}

/* Tabellen */
.analytics-container table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}

.analytics-container th,
.analytics-container td {
    padding: 6px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
}

.analytics-container th {
    background-color: #f2f2f2;
}

/* Attack Types & Methods */
.attack-type {
    font-weight: bold;
    color: #dc3545;
}

.method-get {
    color: #28a745;
}

.method-post {
    color: #dc3545;
}

.method-other {
    color: #6c757d;
}

/* Summary Box */
.summary-box {
    background: #f8f9fa;
    padding: 15px;
    border-left: 4px solid #007cba;
    margin: 20px 0;
}

.summary-item {
    margin: 5px 0;
}

/* Copy URI Button */
.copy-uri {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

.copy-uri:hover {
    text-decoration: underline;
}

.copy-uri[data-copied]::after {
    content: " ✓ kopiert";
    color: #28a745;
    margin-left: 6px;
}