html { scroll-behavior: smooth; }
body { margin: 0; background: #0A0A0B; color: #F5F5F4; font-family: "Instrument Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: #9A9CA1; }
input, textarea { color-scheme: light; }
::placeholder { color: #8E9094; opacity: 1; }
:focus-visible { outline: 2px solid #17181A; outline-offset: 2px; }

.btn-dark:hover { background: #2A2B2E !important; color: #FFFFFF !important; }
.link-line:hover { color: #5B5D62; border-bottom-color: #5B5D62 !important; }
button[type="submit"]:hover { background: #2A2B2E !important; }

header nav a:last-child { white-space: nowrap; }

html { -webkit-text-size-adjust: 100%; }
section[id] { scroll-margin-top: 76px; }
/* Wörter nicht automatisch trennen, nur an gesetzten ­-Stellen */
h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; }

/* Handy */
@media (max-width: 640px) {
  /* Kopfzeile: nur der Beratungs-Button */
  body > div > header { flex-wrap: nowrap !important; mix-blend-mode: normal !important; background: rgba(10,10,11,0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  header nav a:not(:last-child) { display: none; }

  /* Produktkarten zweispaltig und kompakt */
  #produkte > div:last-child { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  #produkte article { border-radius: 16px !important; background: linear-gradient(180deg,#FFFFFF 0px,#EDEDEE 104px,#7C7E83 134px,#111214 160px,#111214 100%) !important; }
  #produkte article > div:first-child { height: 150px !important; padding: 14px 12px 8px !important; }
  #produkte article > div:last-child { padding: 12px 14px 16px !important; gap: 6px !important; }
  #produkte article h3 { font-size: 16px !important; overflow-wrap: normal !important; }
  #produkte article p { font-size: 13px !important; line-height: 1.5 !important; }
  #produkte article > div:last-child > a { font-size: 13px !important; padding-top: 6px; }

  /* Servierroboter: immer erst Video, dann Text */
  #einsatz > div:nth-child(3) > div:first-child { order: 2; }

  /* Größere Tippflächen für Textlinks */
  section a[href^="#"]:not([style*="border-radius"]),
  section a[href*=".html#"]:not([style*="border-radius"]) { padding-top: 10px !important; padding-bottom: 6px !important; }
  footer a { display: inline-block; padding: 3px 0; }
}

/* Sehr kleine Handys (z. B. iPhone SE 1. Gen.) */
@media (max-width: 359px) {
  #produkte > div:last-child { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}