@font-face { font-family:"Montserrat"; font-weight:600; font-display:swap; src:url(../fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
  @font-face { font-family:"Montserrat"; font-weight:700; font-display:swap; src:url(../fonts/montserrat-latin-700-normal.woff2) format("woff2"); }
  @font-face { font-family:"Open Sans"; font-weight:400; font-display:swap; src:url(../fonts/open-sans-latin-400-normal.woff2) format("woff2"); }
  @font-face { font-family:"Open Sans"; font-weight:600; font-display:swap; src:url(../fonts/open-sans-latin-600-normal.woff2) format("woff2"); }
  :root { --red:#CE1944; --red-dk:#A8133A; --ink:#333333; --head:#303030; --muted:#555555; }
  * { box-sizing:border-box; }
  body { margin:0; min-height:100vh; display:flex; flex-direction:column; font-family:"Open Sans", Helvetica, Arial, sans-serif; font-size:14px; color:var(--ink); background:#fff; }
  a { color:var(--red); text-decoration:none; } a:hover { color:var(--red-dk); }
  .wrap { max-width:1140px; margin:0 auto; padding-left:24px; padding-right:24px; }
  .topbar { background:var(--red); color:#fff; font-size:12px; }
  .topbar .wrap { padding-top:8px; padding-bottom:8px; display:flex; flex-wrap:wrap; gap:8px 24px; }
  header { background:#fff; box-shadow:0 2px 12px rgba(51,51,51,.08); }
  header .wrap { padding-top:14px; padding-bottom:14px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
  header img { height:64px; width:auto; display:block; }
  header span { font-family:"Montserrat", sans-serif; font-weight:600; font-size:14px; }
  main { flex:1; padding:56px 0 80px; }
  main .wrap { display:flex; flex-direction:column; align-items:center; }
  h1 { margin:0; font-family:"Montserrat", sans-serif; font-size:38px; font-weight:700; color:#1E1E1E; text-align:center; }
  .sub { margin:12px 0 0; font-size:18px; text-align:center; }
  .sub i { font-style:normal; padding:0 10px; }
  .login { width:100%; max-width:440px; margin-top:56px; }
  h2 { margin:0; font-family:"Montserrat", sans-serif; font-size:26px; font-weight:700; color:var(--head); }
  .bar { width:44px; height:3px; background:var(--red); margin:14px 0 22px; }
  .lead { margin:0 0 26px; line-height:1.6; color:var(--muted); }
  form { display:flex; flex-direction:column; gap:18px; margin:0; }
  .field { display:flex; flex-direction:column; gap:6px; }
  label.f { font-family:"Montserrat", sans-serif; font-size:13px; font-weight:600; color:var(--head); }
  input[type=text], input[type=password] { height:44px; padding:0 12px; font-size:14px; font-family:inherit; border:1px solid #CCC; border-radius:0; background:#fff; color:var(--ink); }
  input[type=text]:focus, input[type=password]:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 2px rgba(206,25,68,.15); }
  .remember { display:flex; align-items:center; gap:10px; color:var(--muted); min-height:44px; }
  .remember input { width:16px; height:16px; margin:0; accent-color:var(--red); }
  .actions { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; }
  button { min-height:44px; padding:8px 28px; border:0; border-radius:0; background:var(--red); color:#fff; font-family:"Montserrat", sans-serif; font-size:14px; font-weight:700; cursor:pointer; }
  button:hover { background:var(--red-dk); }
  button:disabled { opacity:.55; cursor:not-allowed; }
  .forgot { font-size:13px; }
  .note { margin:20px 0 0; font-size:13px; color:var(--muted); }
  footer { background:var(--red); color:#fff; font-size:13px; }
  footer .wrap { padding-top:22px; padding-bottom:22px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; }
  @media (max-width:600px) { h1 { font-size:28px; } .sub { font-size:15px; } main { padding-top:36px; } .login { margin-top:36px; } header img { height:52px; } }
  .error { margin:0 0 18px; padding:10px 12px; background:#FBE8ED; border-left:3px solid var(--red); color:#7A0E28; }
  .nav { display:flex; align-items:center; gap:18px; }
  .nav a.out { font-family:"Montserrat", sans-serif; font-weight:600; font-size:13px; color:var(--ink); }
  .nav a.out:hover { color:var(--red); }
  .welcome { width:100%; max-width:1140px; margin-top:44px; }
  .tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:24px; margin-top:8px; }
  .tile { border:1px solid #E3E3E3; padding:22px; display:flex; flex-direction:column; gap:8px; }
  .tile h3 { margin:0; font-family:"Montserrat", sans-serif; font-size:18px; font-weight:700; color:var(--head); }
  .tile p { margin:0; color:var(--muted); line-height:1.6; }
  .tile .soon { margin-top:auto; padding-top:10px; font-size:12px; color:#999; }
  /* Navigation im Kopf (angemeldet) */
  .mainnav { display:flex; flex-wrap:wrap; align-items:center; gap:28px; }
  .mainnav a { color:var(--ink); padding:6px 0; }
  .mainnav a.active { color:var(--red); font-weight:600; border-bottom:2px solid var(--red); }
  .mainnav a:hover { color:var(--red); }
  .mainnav .sep { width:1px; height:24px; background:#DDD; }
  .mainnav .who { display:flex; align-items:center; gap:10px; font-weight:600; }
  .avatar { width:34px; height:34px; border-radius:50%; background:#5A6165; color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Montserrat", sans-serif; font-size:12px; font-weight:700; }
  .mainnav a.out { font-family:"Montserrat", sans-serif; font-size:13px; font-weight:600; }
  /* Startseite */
  .hello { background:#F4F4F4; border-bottom:1px solid #E6E6E6; }
  .hello .wrap { padding-top:44px; padding-bottom:40px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:16px; }
  .hello .date { font-size:13px; color:#5A6165; }
  .hello h1 { text-align:left; font-size:36px; margin:10px 0 10px; }
  .hello .sub { margin:0; font-size:15px; color:var(--muted); }
  .dash { flex:1; padding:48px 0 72px; }
  .dash .wrap { display:flex; flex-direction:column; gap:56px; }
  .grid3 { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; }
  .card { color:var(--ink); border:1px solid #E3E3E3; display:flex; flex-direction:column; background:#fff; transition:box-shadow .15s, transform .15s; }
  a.card:hover { color:var(--ink); box-shadow:0 6px 20px rgba(51,51,51,.10); transform:translateY(-2px); }
  .card .stripe { height:6px; background:var(--red); }
  .card.muted .stripe { background:#5A6165; }
  .card .body { padding:26px 26px 24px; display:flex; flex-direction:column; gap:12px; flex:1; }
  .card .ico { width:52px; height:52px; background:#FBE8ED; display:flex; align-items:center; justify-content:center; }
  .card.muted .ico { background:#ECEDEE; }
  .card h3 { margin:0; font-family:"Montserrat", sans-serif; font-size:20px; font-weight:700; color:var(--head); }
  .card p { margin:0; line-height:1.6; color:var(--muted); }
  .card .go { margin-top:auto; padding-top:14px; font-family:"Montserrat", sans-serif; font-size:13px; font-weight:700; color:var(--red); }
  .card .soon { margin-top:auto; padding-top:14px; font-size:12px; color:#8A8A8A; }
  .quick { color:var(--ink); background:#F4F4F4; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .quick:hover { color:var(--ink); background:#ECECEC; }
  .quick b { display:block; font-family:"Montserrat", sans-serif; font-size:15px; }
  .quick small { font-size:13px; color:var(--muted); }
  .quick .arr { color:var(--red); font-weight:700; }
  @media (max-width:860px) { .grid3 { grid-template-columns:1fr; } .mainnav { gap:16px; } .hello h1 { font-size:28px; } }
  /* Kronos-Bereich */
  .kband { background:#2B2F33; color:#fff; border-bottom:4px solid var(--red); }
  .kband .wrap { padding-top:44px; padding-bottom:40px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:24px; }
  .kband .crumb { font-size:13px; color:#B3B8BC; }
  .kband .crumb a { color:#B3B8BC; } .kband .crumb a:hover { color:#fff; }
  .kband img { height:46px; width:auto; display:block; margin:14px 0; }
  .kband p { margin:0; font-size:15px; color:#D0D4D7; max-width:520px; line-height:1.6; }
  .btn { display:inline-flex; align-items:center; min-height:44px; padding:12px 22px; background:var(--red); color:#fff; font-family:"Montserrat", sans-serif; font-size:14px; font-weight:700; }
  .btn:hover { background:var(--red-dk); color:#fff; }
  .grid2 { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px; }
  .tool { color:var(--ink); border:1px solid #E3E3E3; display:flex; background:#fff; }
  .tool .side { width:6px; background:var(--red); flex-shrink:0; }
  .tool .body { padding:24px 26px; display:flex; gap:20px; align-items:flex-start; flex:1; }
  .tool .ico { width:52px; height:52px; background:#FBE8ED; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .tool h3 { margin:0 0 6px; font-family:"Montserrat", sans-serif; font-size:19px; font-weight:700; color:var(--head); }
  .tool p { margin:0; line-height:1.6; color:var(--muted); }
  .tool .soon { display:block; padding-top:8px; font-size:12px; color:#8A8A8A; }
  @media (max-width:860px) { .grid2 { grid-template-columns:1fr; } }
  img.avatar { background:#fff; border:1px solid #E3E3E3; object-fit:cover; display:block; }
  /* Kronos-Kachel in RAL 5015 Himmelblau (Bildschirmwert #2271B3) */
  .card.ral5015 .stripe { background:#2271B3; }
  .card.ral5015 .ico { background:#E8F0F8; }
  .card.ral5015 .go { color:#2271B3; }
  /* Alle Bereiche (Startseite) */
  .areas { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px; }
  .area { color:var(--ink); border:1px solid #E3E3E3; border-left:4px solid var(--red); padding:16px 18px; display:flex; flex-direction:column; gap:4px; position:relative; transition:box-shadow .15s; }
  .area:hover { color:var(--ink); box-shadow:0 6px 20px rgba(51,51,51,.10); }
  .area b { font-family:"Montserrat", sans-serif; font-size:15px; color:var(--head); }
  .area small { font-size:12.5px; color:var(--muted); line-height:1.5; padding-right:18px; }
  .area .arr { position:absolute; right:14px; top:14px; color:var(--red); font-weight:700; }
  @media (max-width:1000px) { .areas { grid-template-columns:repeat(2, minmax(0,1fr)); } }
  @media (max-width:560px) { .areas { grid-template-columns:1fr; } }
  .mainnav a.who { color:var(--ink); display:flex; align-items:center; gap:10px; font-weight:600; }
  .mainnav a.who:hover { color:var(--red); }
  img.avatar { border-radius:50%; width:34px; height:34px; }
  .dash .wrap > div { width:100%; }
  .card .ico { color:var(--red); } .card.ral5015 .ico { color:#2271B3; } .card.muted .ico { color:#5A6165; }
  .mainnav { gap:22px; }
  .mainnav .more { position:relative; } .mainnav .more > button { border:0; background:none; padding:6px 0; min-height:0; font:inherit; color:var(--ink); cursor:pointer; }
  .mainnav .more > button:hover, .mainnav .more.active > button { color:var(--red); }
  .mainnav .more-m { display:none; position:absolute; right:0; top:100%; background:#fff; border:1px solid #E3E3E3; box-shadow:0 10px 30px rgba(0,0,0,.1); min-width:180px; z-index:50; padding:6px 0; }
  .mainnav .more:hover .more-m, .mainnav .more:focus-within .more-m { display:block; }
  .mainnav .more-m a { display:block; padding:9px 16px; border:0 !important; }