/*
 Urheberrechtshinweis
 ====================

 Copyright (c) 2013– DROPPY.ch
 
 Alle Rechte vorbehalten.
 
 Der vorliegende Code ist urheberrechtlich geschuetzt.
 Jede unbefugte Nutzung, Vervielfaeltigung oder Verbreitung dieses Codes ist ausdruecklich untersagt und kann rechtliche Konsequenzen haben.
 
 Jede Person, die diesen Code herunterlaedt, kopiert oder verwendet, ohne dazu berechtigt zu sein, begeht eine Urheberrechtsverletzung und verstoesst gegen das geltende Recht.
 
 Wir behalten uns das Recht vor, Verstoesse gegen das Urheberrecht straf- und zivilrechtlich zu verfolgen und Schadensersatzansprueche geltend zu machen.
 
 Bei Fragen oder Genehmigungsanfragen benutzen Sie unser Kontaktformular [https://www.cloud.droppy.ch/contact.html]. 
*/


/* --- 0. SCHRIFTARTEN --- */
@font-face { font-family: 'Open Sans'; src: url('../ttf/OpenSans-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Open Sans'; src: url('../ttf/OpenSans-Semibold.ttf') format('truetype'); font-weight: 600; font-style: normal; }

/* --- 1. GRUNDSTILE --- */
body { font-family: 'Open Sans', 'Arial', sans-serif; font-weight: 300; text-align: center; }
b, strong { font-weight: 600 !important; }

/* --- 2. BRANDING & BUTTONS --- */
.btn-primary { background-color: #28a745 !important; border: 2px solid #28a745 !important; font-weight: 600; transition: all 0.2s ease-in-out; }
.btn-primary:hover { background-color: #309030 !important; border-color: #fff !important; box-shadow: 0 0 8px rgba(0,0,0,0.2); }
.btn-danger { background-color: #dc3545 !important; border: 2px solid #dc3545 !important; font-weight: 600; transition: all 0.2s ease-in-out; }
.btn-danger:hover { background-color: #c82333 !important; border-color: #fff !important; box-shadow: 0 0 8px rgba(0,0,0,0.2); }

/* --- 3. GAUGE METER --- */
div.test_area { aspect-ratio: 1 / 0.8; min-height: 180px; max-height: 280px; position: relative; display: flex; flex-direction: column; align-items: center; }
div.test_name { position: absolute; top: 0.1em; width: 100%; font-size: clamp(1rem, 3vw, 1.4em); z-index: 9; }
div.meter_text { position: absolute; top: 55%; width: 100%; transform: translateY(-50%); font-size: clamp(1.6rem, 8vw, 2.5em); font-weight: 600; color: #444; z-index: 9; }
div.meter_text:empty:before { content: "0.00"; }
.meter_text.initializing { font-size: 0.9em !important; opacity: 0.7; }
div.unit { position: absolute; top: 72%; width: 100%; font-size: clamp(0.7rem, 2.5vw, 0.9rem); color: #888; z-index: 9; }
div.test_area canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; z-index: 1; }

/* --- 4. RATINGS & TABELLEN --- */
.rating-excellent { color: #059669 !important; font-weight: 600 !important; } 
.rating-good { color: #eab308 !important; } 
.rating-average { color: #d97706 !important; }
.right_tables thead th { background-color: #28a745 !important; color: #fff; font-weight: 600; position: sticky; top: 0; }
.left_tables th { color: #555; text-align: right; width: 53%; padding: 2px !important; }
.left_tables td { color: #28a745; font-weight: 600; padding: 2px !important; word-break: break-all; font-size: 0.9em; }

/* --- 5. TOGGLE ELEMENTE --- */
.btn-advanced-toggle { display: inline-block; font-weight: 600; color: #28a745; cursor: pointer; padding: 5px 15px; border: 1px solid #28a745; border-radius: 4px; transition: all 0.2s; }
.btn-advanced-toggle:hover { background-color: #28a745; color: #fff !important; text-decoration: none; }
.footer-link-toggle { font-weight: 600; color: #28a745; cursor: pointer; }
.footer-link-toggle:hover { text-decoration: underline; color: #218838; }

/* --- 6. RESPONSIVE ANPASSUNGEN --- */
#ipArea, .test_group { flex: 1 1 20em; min-width: 20em; }
.log_container { flex: 1 1 30em; min-width: 30em; }
#ipArea #ip { display: block; }
@media (max-width: 991px) { #rating_total, #rating_download, #rating_upload { margin-top: 10px; min-height: 50px; } }
@media (max-width: 576px) { canvas { aspect-ratio: 1/1; min-height: 180px !important; } .col-6 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 30px; } }
@media (max-height: 600px) and (orientation: landscape) { #advanced .row { display: flex !important; flex-wrap: wrap !important; } #advanced .col-12.col-md-4, #advanced .col-6.col-md-4 { flex: 0 0 50% !important; max-width: 50% !important; min-width: 1px !important; } #advanced .col-12.col-md-4:first-child { flex: 0 0 100% !important; max-width: 100% !important; margin-bottom: 1rem !important; } }