:root {
  --rot: #c01718;
  --rot-dunkel: #9e1213;
  --anthrazit: #1e1e22;
  --grau: #6b6b74;
  --grau-hell: #9a9aa2;
  --linie: #e8e6e3;
  --grund: #faf9f7;
  --karte: #ffffff;
  --schatten: 0 1px 3px rgba(30,30,34,.06), 0 8px 24px rgba(30,30,34,.05);
  --radius: 14px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--anthrazit);
  background: var(--grund);
  line-height: 1.6;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
a { color: inherit; }

/* ---------- Sprachschalter ---------- */
.lang { display: inline-flex; gap: 2px; background: #f0efec; border-radius: 999px; padding: 3px; }
.lang button {
  border: 0; background: transparent; cursor: pointer; font: inherit; font-size: .8rem;
  font-weight: 600; color: var(--grau); padding: 4px 11px; border-radius: 999px; letter-spacing: .03em;
}
.lang button.active { background: var(--karte); color: var(--rot); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Sprach-Sichtbarkeit: gesteuert ueber data-lang am <html> */
[data-t] { display: none; }
html[data-lang="de"] [data-t="de"],
html[data-lang="en"] [data-t="en"],
html[data-lang="ro"] [data-t="ro"] { display: revert; }

/* ---------- Kopf ---------- */
header {
  background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie); position: sticky; top: 0; z-index: 20;
}
.kopf { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 16px; }
.marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--anthrazit); }
.marke img { height: 32px; width: auto; }
.marke b { font-weight: 700; letter-spacing: .01em; font-size: 1.05rem; }
.marke b em { font-style: normal; color: var(--rot); }
.kopf-rechts { display: flex; align-items: center; gap: 14px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-weight: 600; font-size: .95rem; padding: 11px 22px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s;
}
.btn-primary { background: var(--rot); color: #fff; }
.btn-primary:hover { background: var(--rot-dunkel); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(192,23,24,.28); }
.btn-ghost { background: transparent; color: var(--anthrazit); border-color: var(--linie); }
.btn-ghost:hover { border-color: var(--grau-hell); }

/* ---------- Hero (oeffentliche Startseite) ---------- */
.hero { padding: 88px 0 64px; text-align: center; }
.hero .abz {
  display: inline-block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rot); border: 1px solid rgba(192,23,24,.35); border-radius: 999px;
  padding: 5px 15px; margin-bottom: 26px; font-weight: 700;
}
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; }
.hero p { color: var(--grau); max-width: 560px; margin: 18px auto 32px; font-size: 1.1rem; }
.hero .cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero .hint { margin-top: 20px; font-size: .85rem; color: var(--grau-hell); }

.mini {
  max-width: 760px; margin: 8px auto 0; padding: 22px 26px; background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten);
  color: var(--grau); font-size: .95rem; text-align: left;
}
.mini b { color: var(--anthrazit); }

/* ---------- Dashboard ---------- */
/* padding-top/-bottom only: a shorthand "40px 0" wiped .wrap's 24px sides, so on a
   phone the dashboard ran edge to edge. */
.dash-head { padding-top: 40px; padding-bottom: 8px; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 18px 28px; }
.dash-head h1 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; }
/* The first name in the greeting, linking to the person's own card in Leads. Red at all
   times, not only on hover: phones have no hover, and red is already the link colour. */
.who-link { color: var(--rot); text-decoration: none; border-radius: 4px; }
.who-link:hover { color: var(--rot-dunkel); }
.who-link:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
.dash-head .who { color: var(--grau); margin-top: 4px; font-size: .95rem; }
.dash-head .who:empty { display: none; }
.dash-sec { padding-top: 26px; padding-bottom: 60px; }
.dash-sec h2 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--grau-hell);
  font-weight: 700; margin: 26px 0 14px;
}
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.tile {
  position: relative; background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 22px; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 8px; min-height: 132px;
  transition: transform .13s, box-shadow .13s, border-color .13s;
}
a.tile:hover { transform: translateY(-3px); box-shadow: var(--schatten); border-color: transparent; }
.tile .ic {
  width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
  font-size: 1.35rem; color: #fff; margin-bottom: 4px;
}
.tile h3 { font-size: 1.05rem; font-weight: 700; }
.tile p { font-size: .86rem; color: var(--grau); flex: 1; }
.tile .badge {
  position: absolute; top: 16px; right: 16px; font-size: .66rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px;
}
.badge.live { background: #e7f4ea; color: #1c7a34; }
.badge.soon { background: #f2f1ef; color: var(--grau); }
.tile.locked { opacity: .62; cursor: default; }

/* Firmenweite Werkzeuge rechts neben der Begruessung: kompakte Karten, gleich
   fuer alle (Organigramm, IT Ticketing, Firmennews). Auf dem Handy unter dem Namen. */
.company { display: flex; flex-wrap: wrap; gap: 18px 12px; justify-content: flex-end; padding-top: 9px; }
.ctile {
  position: relative; display: flex; align-items: center; gap: 12px; width: 236px;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 12px 14px; text-decoration: none; color: inherit;
  transition: transform .13s, box-shadow .13s, border-color .13s;
}
a.ctile:hover { transform: translateY(-2px); box-shadow: var(--schatten); border-color: transparent; }
.ctile .ic {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center;
  font-size: 1.1rem; color: #fff;
}
.ctile .txt { min-width: 0; display: flex; flex-direction: column; }
.ctile h3 { font-size: .93rem; font-weight: 700; line-height: 1.3; }
.ctile p { font-size: .78rem; color: var(--grau); line-height: 1.35; }
/* The badge sits ON the top edge, like a tag, so the title keeps the full width:
   "Company news" next to a "Coming soon" badge otherwise breaks onto two lines. */
.ctile .badge {
  position: absolute; top: -9px; right: 12px; font-size: .6rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px;
  border: 1px solid var(--linie);
}
.ctile.locked .ic, .ctile.locked .txt { opacity: .62; }

/* News on a company card: a red count tag on the top-left edge, a faint red border
   while anything is unread, and three quick flashes per dashboard visit until the
   card is clicked (dashboard.js). Red is the company colour - news about us. */
.ctile .news {
  position: absolute; top: -9px; left: 12px; font-size: .6rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px;
  background: var(--rot); color: #fff;
}
.ctile.has-news { border-color: rgba(192, 23, 24, .45); }
.ctile.flash { animation: rt-flash .5s ease-in-out 3; }
@keyframes rt-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192, 23, 24, 0); }
  50% { box-shadow: 0 0 0 4px rgba(192, 23, 24, .5); border-color: var(--rot); }
}
@media (prefers-reduced-motion: reduce) { .ctile.flash { animation: none; } }
.ctile.locked { cursor: default; }
@media (max-width: 900px) {
  .company { justify-content: flex-start; width: 100%; }
  .ctile { flex: 1 1 236px; width: auto; }
}

/* Kachel-Akzentfarben */
.c-red    .ic { background: #c01718; }
.c-slate  .ic { background: #3f4756; }
.c-gold   .ic { background: #b8860b; }
.c-teal   .ic { background: #0f7a6c; }
.c-violet .ic { background: #6b3fa0; }
.c-blue   .ic { background: #2563a8; }

/* ---------- Fuss ---------- */
footer { border-top: 1px solid var(--linie); background: var(--karte); padding: 30px 0; margin-top: auto; }
.fuss { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between;
  color: var(--grau); font-size: .86rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--rot); }
.fuss .links a { margin-right: 20px; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* ---------- Rechtsseiten ---------- */
.recht { padding: 50px 0 80px; max-width: 780px; }
.recht h1 { font-size: 1.7rem; margin-bottom: 6px; font-weight: 800; }
.recht .stand { color: var(--grau); font-size: .86rem; margin-bottom: 30px; }
.recht h2 { font-size: 1.1rem; margin: 28px 0 8px; }
.recht p, .recht li { color: #3d3d44; font-size: .96rem; }
.recht ul { padding-left: 20px; }
.recht table { border-collapse: collapse; margin: 8px 0; }
.recht td { padding: 4px 18px 4px 0; vertical-align: top; }
.recht td:first-child { color: var(--grau); white-space: nowrap; }

@media (max-width: 640px) {
  .kopf { height: 58px; }
  .hero { padding: 56px 0 40px; }
  .marke b { font-size: .98rem; }
}

/* ---------- Header on phones ----------
   The logo (170 px), "Rossik Tools", the DE/EN/RO switch and the sign in / sign out
   button need about 490 px; a phone has 320 to 430. Step by step: tighter gutters and a
   smaller logo, then the wordmark goes (the logo still links home) and the header button
   becomes an icon. Its text stays in the markup at font-size 0, so screen readers still
   announce "Sign out" in the chosen language. */
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .kopf { gap: 10px; }
  .marke { gap: 8px; min-width: 0; }
  .marke img { height: 24px; }
  .kopf-rechts { gap: 8px; flex-shrink: 0; }
  .kopf-rechts .btn { padding: 8px 12px; font-size: .85rem; }
}
@media (max-width: 480px) {
  .marke b { display: none; }
  .lang button { padding: 4px 8px; font-size: .76rem; }
  .kopf-rechts .btn { width: 38px; height: 38px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .kopf-rechts .btn::before {
    content: ""; width: 18px; height: 18px; background: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  }
  /* Sign out: door with an arrow leaving it. */
  .kopf-rechts .btn-ghost {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
  }
  /* Sign in: arrow entering a door. */
  .kopf-rechts .btn-primary {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
  }
}
@media (max-width: 360px) {
  .marke img { height: 20px; }
}