@font-face {
  font-family: 'colaborate-thinregular';
  src: url('ColabThi-webfont.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'colaboratelightregular';
  src: url('ColabLig-webfont.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'colaborate-regularregular';
  src: url('ColabReg-webfont.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'colaborate-mediumregular';
  src: url('ColabMed-webfont.woff') format('woff');
  font-display: swap;
}
@font-face {
  font-family: 'colaborate-boldregular';
  src: url('ColabBol-webfont.woff') format('woff');
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;   /* iOS skaliert Text bei Drehung nicht mehr eigenmaechtig */
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;         /* Anker #driver / #wartung nicht randbuendig */
}

body {
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  font-size: 16px;
  background: #ffffff;
  color: #30515e;
  min-height: 100vh;
  min-height: 100dvh;               /* iOS: echte Hoehe ohne Adressleisten-Sprung */
  padding: clamp(1rem, 4vw, 2rem);
  padding-left:  max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-left));
  padding-right: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-right));
  padding-bottom: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-wrap: break-word;
}

body.login { align-items: center; justify-content: center; }
body.login .container { display: flex; flex-direction: column; align-items: center; }

.container { max-width: 800px; width: 100%; }

/* ---------- Typografie ---------- */

h1 {
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  font-weight: 100;
  color: #30515e;
  font-size: clamp(1.6rem, 6vw, 40px);
  line-height: 1.15;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

h2 {
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  font-weight: 100;
  color: #30515e;
  font-size: clamp(1.25rem, 4.5vw, 25px);
  line-height: 1.2;
  text-transform: uppercase;
  margin: 2rem 0 0.8rem;
  border-bottom: 2px solid #7faabd;
  padding-bottom: 0.4rem;
}

h3 {
  font-family: 'colaborate-mediumregular', Arial, sans-serif;
  font-weight: 500;
  color: #7faabd;
  margin: 1.2rem 0 0.5rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ---------- Kopfbereich ---------- */

.header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #7faabd;
  padding-bottom: 0.9rem;
}

.header-logo-link { display: inline-flex; line-height: 0; flex-shrink: 0; }

.header-logo {
  height: 44px;
  width: auto;
  vertical-align: middle;
}

.header-title {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 1.25rem;
  border-left: 1px solid #7faabd66;
  line-height: 1.1;
}

.header h1 {
  margin: 0;
  font-size: clamp(1.3rem, 4vw, 26px);
  letter-spacing: 1px;
}

.header-sub {
  display: block;
  margin-top: 0.2rem;
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  font-size: 0.75rem;
  color: #7faabd;
  letter-spacing: 0.5px;
}

.logout {
  margin-left: auto;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid #7faabd;
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  font-size: 0.8rem;
  padding: 0.3rem 0.8rem;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  color: #30515e;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
}

.logout:hover { background: #7faabd; color: #ffffff; }

/* ---------- Login ---------- */

.login-box {
  background: #f5f8f9;
  border: 2px solid #7faabd44;
  padding: clamp(1.5rem, 6vw, 2rem);
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 8px 32px rgba(48, 81, 94, 0.15);
  text-align: center;
}

.login-box img {
  max-height: 60px;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
}

.login-box h1 { margin-bottom: 1.5rem; }

input[type=password] {
  width: 100%;
  padding: 0.9rem;
  min-height: 48px;
  border: 1px solid #7faabd66;     /* rundum duenner Rahmen statt Unterstrich */
  background: #ffffff;
  color: #30515e;
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  font-size: 16px;          /* <16px loest auf dem iPhone Auto-Zoom aus */
  margin-bottom: 1rem;
  outline: none;
}

/* Fokus beim Tippen: nur dezent der Rahmen etwas kraeftiger,
   kein Unterstrich und kein zusaetzlicher Fokusrahmen */
input[type=password]:focus,
input[type=password]:focus-visible {
  border-color: #7faabd;
  outline: none;
  box-shadow: 0 0 0 3px rgba(127, 170, 189, 0.2);
}

button {
  background: #30515e;
  color: #fff;
  border: none;
  padding: 0.9rem;
  min-height: 48px;
  width: 100%;
  border-radius: 0;
  cursor: pointer;
  font-family: 'colaborate-mediumregular', Arial, sans-serif;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}

button:hover { background: #7faabd; }

.error {
  color: #be1717;
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

/* ---------- Listen / Dateien ---------- */

.links a {
  display: block;
  color: #30515e;
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  padding: 0.6rem 0;
  text-decoration: none;
  border-bottom: 1px solid #7faabd44;
}

.links a:hover { color: #7faabd; }

.badge {
  background: #30515e;
  color: #fff;
  font-family: 'colaborate-mediumregular', Arial, sans-serif;
  font-size: 0.75rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.files {
  background: #f5f8f9;
  border: 2px solid #7faabd44;
  border-radius: 8px;
  padding: 1rem;
}

.files a {
  display: block;
  color: #30515e;
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  padding: 0.6rem 0;
  text-decoration: none;
  border-bottom: 1px solid #7faabd33;
  overflow-wrap: anywhere;      /* lange Dateinamen brechen um statt zu ueberlaufen */
  touch-action: manipulation;
}

.files a:hover { color: #7faabd; }

.driver-file {
  padding: 0.4rem 0 0.6rem;
  border-bottom: 1px solid #7faabd33;
}

.driver-file:last-child { border-bottom: none; }
.driver-file a { border-bottom: none; padding-bottom: 0.3rem; }

.breadcrumb {
  background: #f5f8f9;
  border: 1px solid #7faabd44;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  overflow-wrap: anywhere;
  line-height: 2;
}

.breadcrumb a { color: #30515e; text-decoration: none; }
.breadcrumb a:hover { color: #7faabd; }
.breadcrumb span { color: #7faabd; margin: 0 0.3rem; }

/* ---------- Download-Eintraege ---------- */

/* Desktop: Name + Buttons in einer Zeile, Hash klein darunter */
.download-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label buttons"
    "hash  hash";
  column-gap: 1rem;
  row-gap: 0.15rem;
  align-items: center;
  border-bottom: 1px solid #7faabd44;
  padding: 0.5rem 0;
}

.download-label   { grid-area: label; margin: 0; }
.download-hash    { grid-area: hash; }
.download-buttons { grid-area: buttons; }
.download-item .info-links { grid-column: 1 / -1; }

.download-label a {
  color: #30515e;
  text-decoration: none;
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  display: inline-block;
  padding: 0.2rem 0;
  overflow-wrap: anywhere;
}

.download-label a:hover { color: #7faabd; }

.download-hash {
  font-size: 0.72rem;
  color: #7faabd;
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  margin: 0;
  word-break: break-all;
}

.download-hash code {
  font-family: monospace;
  color: #30515e;
}

.download-buttons { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }

.btn-copy {
  background: #f5f8f9;
  border: 1px solid #7faabd;
  color: #30515e;
  padding: 0.3rem 0.7rem;
  min-height: 32px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  font-size: 0.8rem;
  width: auto;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.btn-copy:hover { background: #7faabd; color: #fff; }

a.btn-copy {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* ---------- Update-Infoseiten: Linkraster DE/EN x ohne/mit SPV ---------- */

.info-links {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 0.3rem 0.8rem;
  align-items: center;
  margin-top: 0.5rem;
  padding: 0.5rem 0.8rem;
  background: #f5f8f9;
  border: 1px solid #7faabd44;
  border-radius: 6px;
}

.info-links-head {
  font-family: 'colaborate-mediumregular', Arial, sans-serif;
  font-size: 0.7rem;
  color: #7faabd;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.info-links-lang {
  font-family: 'colaborate-mediumregular', Arial, sans-serif;
  color: #30515e;
  font-size: 0.8rem;
}

.info-links-cell { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.info-links-none { color: #aaa; font-size: 0.8rem; }

/* ---------- Footer ---------- */

.footer {
  text-align: center;
  margin-top: 3rem;
  padding: 1rem;
  font-size: 0.8rem;
  font-family: 'colaborate-thinregular', Arial, sans-serif;
  border-top: 1px solid #7faabd44;
}

.footer a {
  color: #7faabd;
  text-decoration: none;
  display: inline-block;
  padding: 0.4rem 0.2rem;
}

.footer a:hover { color: #30515e; }

/* ---------- Tastaturbedienung ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid #30515e;
  outline-offset: 2px;
}

/* ---------- Touch-Geraete: groessere Trefferflaechen ---------- */

@media (pointer: coarse) {
  .files a,
  .links a { padding: 0.75rem 0; }
  .btn-copy { min-height: 44px; }
}

/* ---------- Smartphone-Layout ---------- */

@media (max-width: 600px) {
  .header { flex-wrap: wrap; gap: 0.6rem; }

  .header-title {
    flex: 1 0 100%;
    order: 3;
    padding-left: 0;
    border-left: none;
    margin-top: 0.25rem;
  }

  .header-logo { height: 34px; }
  .logout { min-height: 40px; }

  .files { padding: 0.75rem; }

  .breadcrumb { font-size: 0.85rem; }

  .download-item {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "hash"
      "buttons";
    row-gap: 0.35rem;
    padding: 0.7rem 0;
  }

  .download-buttons { gap: 0.4rem; justify-content: flex-start; }

  .info-links { grid-template-columns: 1fr; }
  .info-links-head:first-child { display: none; }
  .info-links-head { margin-top: 0.3rem; }

  .download-buttons .btn-copy {
    flex: 1 1 calc(50% - 0.2rem);   /* zwei Buttons pro Zeile, volle Breite nutzen */
    justify-content: center;
    text-align: center;
    white-space: normal;
  }

  .download-hash { font-size: 0.72rem; }
}

@media (max-width: 380px) {
  .download-buttons .btn-copy { flex: 1 1 100%; }
}