/* =====================================================================
   TerraSolution Branding fuer osTicket Kundenportal  (Komplettversion)
   Farben: #cc0000 / #a00000  |  Schrift: Open Sans
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

body, body #container, #nav li a, .button, input, select, textarea {
  font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif !important;
}

body { background: #eef1f4 !important; }

/* ---- Container: volle Breite mit Maximum ---- */
#container {
  width: 100% !important;
  max-width: 1100px !important;
  margin: 24px auto !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10) !important;
  border-radius: 10px !important;
}

/* ---- Kopfbereich ---- */
#header { background: #ffffff !important; }
#header a, #header a:link, #header a:visited { color: #cc0000 !important; }

/* ---- Navigation ---- */
#nav {
  background: #f5f5f5 !important;
  border-top: 2px solid #cc0000 !important;
  box-shadow: 0 2px 3px rgba(0,0,0,0.15) !important;
}
#nav li a { color: #333333 !important; }
#nav li a.active, #nav li a:hover { background-color: #cc0000 !important; color: #ffffff !important; }

/* ---- Inhalt ---- */
#content { padding: 30px 24px !important; min-height: 260px !important; }
#content, #content p, #content li { font-size: 15px !important; line-height: 1.6 !important; }
#content h1, #content h2, #content h3 { color: #333333 !important; }

.main-content { width: 100% !important; max-width: 100% !important; float: none !important; }

/* ---- Standard-Buttons ausblenden (Kacheln kommen aus dem iframe) ---- */
#landing_page #new_ticket,
#landing_page #check_status {
  display: none !important;
}

/* ---- Allgemeine Buttons + Formulare ---- */
#content .button, #content a.button,
#content .blue.button, #content .green.button,
.button, .button:visited, .blue.button, .green.button {
  background-color: #cc0000 !important; color: #ffffff !important; text-shadow: none !important;
}
.button:hover, .blue.button:hover, .green.button:hover { background-color: #a00000 !important; }
input[type="submit"], input[type="button"] {
  background-color: #cc0000 !important; border-color: #cc0000 !important; color: #ffffff !important;
}
input[type="submit"]:hover, input[type="button"]:hover { background-color: #a00000 !important; }

/* ---- Links im Inhalt ---- */
#content a, #content a:link, #content a:visited, .pagenav a { color: #cc0000 !important; }
#content a:hover { color: #a00000 !important; }

/* ---- MOBIL (bis 768px) ---- */
@media (max-width: 768px) {
  #container { max-width: 100% !important; margin: 0 !important; border-radius: 0 !important; }
  #content { padding: 20px 16px !important; }
  .main-content { width: 100% !important; max-width: 100% !important; float: none !important; }
  #landing_page #new_ticket,
  #landing_page #check_status { width: 100% !important; float: none !important; margin-top: 16px !important; }
  #header { height: auto !important; padding: 10px 16px !important; }
  #header p { width: auto !important; }
  #nav { white-space: normal !important; height: auto !important; padding-bottom: 8px !important; }
}

/* ---- Hero + Kacheln (direkt im Landing-Template eingebaut) ---- */
#landing_page .ts-hero {
  background: linear-gradient(135deg,#cc0000 0%,#a00000 100%) !important;
  color: #ffffff !important; border-radius: 12px; padding: 52px 40px; margin: 0 0 26px 0;
  text-align: center; box-shadow: 0 10px 30px rgba(204,0,0,0.22);
}
#landing_page .ts-hero h1 { color:#ffffff !important; font-size:2.3em; font-weight:700; margin:0 0 14px 0; line-height:1.2; }
#landing_page .ts-hero p  { color:#ffffff !important; font-size:1.15em; line-height:1.6; margin:0 auto; max-width:680px; }
#landing_page .ts-tiles { display:flex; gap:22px; flex-wrap:wrap; margin-bottom:10px; }
#landing_page .ts-tile {
  flex:1; min-width:220px; background:#ffffff; border:1px solid #e6e6e6; border-top:4px solid #cc0000;
  border-radius:12px; padding:32px 24px; text-align:center; text-decoration:none !important; color:#333333 !important;
  box-shadow:0 3px 12px rgba(0,0,0,0.06); display:block;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#landing_page .ts-tile:hover { transform:translateY(-6px); box-shadow:0 14px 30px rgba(0,0,0,0.15); border-top-color:#a00000; }
#landing_page .ts-tile .ico { font-size:2.7em; display:block; margin-bottom:14px; line-height:1; }
#landing_page .ts-tile h3 { color:#cc0000 !important; font-size:1.25em; font-weight:700; margin:0 0 8px 0; }
#landing_page .ts-tile p  { color:#666666 !important; font-size:0.98em; line-height:1.5; margin:0; }
@media (max-width:768px){ #landing_page .ts-tiles { flex-direction:column; } #landing_page .ts-hero { padding:38px 22px; } #landing_page .ts-hero h1 { font-size:1.7em; } }