/* ==========================
   1) Design Tokens / Defaults
   ========================== */
:root{
  /* Maße */
  --header-h:	70px;
  --subbar-h:	50px;
  --subbar-gap:	16px;     /* Abstand zwischen Header & Subbar */
  --footer-h:	80px;
  --pad-x:		40px;
  --pad-y:		20px;
  --radius:		8px;

  /* Farben (Domain kann überschreiben) */
/*  --page- bg: #fafafa; /* */
/*  --bra nd:   #6b46c1;     /* Akzent für Tiles */
  --text:    #222;
  --muted:   #6b7280;
  --border:  #ccc;
  --panel-bg:#fff;

/*  --page- bg:   #f5faf7; /* */
/*  --header- bg: #0ea5e9; /* */
  
  /* TRC Farben aus Logo */
/*  --page- bg:	#F5F5F5;   /* dezentes Grau */
/*  --header- bg:	#111111;   /* sanftes Rot #C54D39   silbergrau #C0C0C0*/
/*  --bra nd:		#B13620;   /* kräftiger Basiston */
/*  --brand- dk:	#A73624;   /* Hover/Active */
  --border:		#E5E7EB;   /* optional: Rahmen/Linien */
/*  --header- col:	#CCCC22;   /* türkis #0E7490 */


  /* Effekte */
  --shadow: 0 2px 5px rgba(0,0,0,.2);

  /* Typo */
/*  --font-sans: "Segoe UI", SegoeUI, -apple-system, system-ui, Roboto,
               "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-size: 15px; */
  
  
/* === Typo-Update (serifenlos, Arial/Tahoma bevorzugt) === */

  --font-sans: Arial, Tahoma, "Segoe UI", Roboto, Helvetica, sans-serif;
  /* optional: Grundgröße leicht anheben */
   --font-size: 15.5px;


  /* Header bleibt immer gleich */
/*  --header- bg: #673ab7;*/

  /* Tiles */
  --tile-w: 240px;        /* feste Breite je Kachel */
  --tile-gap-x: 18px;
  --tile-gap-y: 18px;
}

/* Anwendung (wie zuletzt besprochen) */
header{ background: var(--header-bg); }
footer .footer-top{ background: var(--page-bg); }
footer .footer-bottom{ background: var(--header-bg); }
main{ background: var(--page-bg); }





/* ==========================
   2) Basis & Typografie
   ========================== */
html, body{
  height: 100%;
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size);
  line-height: 1.5;
  color: var(--text);
  background: var(--page-bg);
  overflow: hidden; /* nur <main> scrollt */

  /* neutrales Rendering 
  text-rendering: auto;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern" 1, "liga" 1;
  */
  
  font-family: var(--font-sans);
  /* schärferes Rendering für Sans-Serif */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em;

}

/* Überschriften etwas kräftiger & ruhiger sperren */
h1, h2, h3{
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: .2em 0;
}

/* UI-Elemente minimal kräftiger */
button, .subbar-btn, input, select, textarea{
  font-family: var(--font-sans);
  font-weight: 600;
}

/* Tabellen & kleinere UI-Texte gut lesbar */
table, th, td, .badge, .mono{
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.005em;
}


/* ==========================
   3) Header (fix oben)
   ========================== */
header{
  position: fixed; top:0; left:0; right:0; height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 20px;
  background: var(--header-bg); /* ← EINZIGER Background! */
  flex: 0 0 auto;
  color: var(--header-col);		/* fff */
  box-shadow: var(--shadow);
  z-index:1000;
}
.header-left, .header-right{ display:flex; align-items:center; gap:12px; }
header img, header .logo { height: 40px; }

/* Titel mittig im Header */
header h1{
  position:absolute; left:50%; transform:translateX(-50%);
  margin:0; text-align:center; width:60%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.header-badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background:#ef4444; color:#fff; font-weight:700; font-size:12px; letter-spacing:.06em;
}

/* ==========================
   4) Subbar (fix unter Header)
   ========================== */
   
.subbar{
  position: fixed;
  top: calc(var(--header-h) + var(--subbar-gap));
  left: 0; right: 0; height: var(--subbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 20px;
  background:#e6e6e6; border-bottom:1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  z-index:999;
}
.subbar-left, .subbar-center, .subbar-right{
  display:flex; align-items:center; gap:8px; height:100%;
}
.subbar-left  { flex:1; justify-content:flex-start; }
.subbar-center{ flex:1; justify-content:center; }
.subbar-right { flex:1; justify-content:flex-end; }

.subbar-btn {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid #d1d5db;
  background: #f8fafc;
  color: inherit;
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.subbar-btn:hover { background: #eef2f7; }
.subbar-btn.btn-ghost { background: transparent; border-color: transparent; }
.subbar-btn.btn-primary { background: #0ea5e9; border-color: #0284c7; color: #fff; }
.subbar-btn.btn-primary:hover { background: #0284c7; }

.subbar-btn.btn-ghost{ color: var(--brand); border-color: var(--brand); }
.subbar-btn.btn-ghost:hover{ background: var(--brand); color:#fff; }
.subbar-btn.btn-primary{ background: var(--brand); color:#fff; border-color: var(--brand); }
.subbar-btn.btn-primary:hover{ filter: brightness(0.95); }


/*
.subbar{
  position: fixed;
  top: calc(var(--header-h) + var(--subbar-gap));
  left: 0; right: 0; height: var(--subbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 20px;
  background:#e6e6e6; border-bottom:1px solid #ccc;
  box-shadow: 0 2px 5px rgba(0,0,0,.1);
  z-index:999;
}
.subbar-left, .subbar-center, .subbar-right{
  display:flex; align-items:center; gap:8px; height:100%;
}
.subbar-left  { flex:1; justify-content:flex-start; }
.subbar-center{ flex:1; justify-content:center; }
.subbar-right { flex:1; justify-content:flex-end; }

/* Buttons in der Subbar 
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:32px; line-height:32px; padding:0 12px;
  border-radius:10px; font-weight:600; text-decoration:none;
  border:1px solid transparent; cursor:pointer; background:transparent;
}
.btn-ghost{ color: var(--brand); border-color: var(--brand); }
.btn-ghost:hover{ background: var(--brand); color:#fff; }
.btn-primary{ background: var(--brand); color:#fff; border-color: var(--brand); }
.btn-primary:hover{ filter: brightness(0.95); }
*/
/* ==========================
   5) Main (einziger Scrollbereich)
   ========================== */
main{
  position: fixed; left:0; right:0; bottom: var(--footer-h);
  top: var(--header-h); /* Standard ohne Subbar */
  overflow:auto; -webkit-overflow-scrolling:touch;
  padding: var(--pad-y) var(--pad-x);
  padding-top: calc(var(--pad-y) + 12px); /* H2 bekommt Luft */
  box-sizing:border-box;
  background: var(--page-bg);
}
/* Wenn Subbar da ist, rutscht Main weiter nach unten */
body:has(.subbar) main,
body.has-subbar main{
  top: calc(var(--header-h) + var(--subbar-h) + var(--subbar-gap));
}

/* H2 im Main */
.page-intro{ margin: 8px 0 12px; }
.page-title{ text-align:center; font-weight:700; letter-spacing:.2px; margin:6px 0 8px; }

/* ==========================
   6) Footer (fix unten, zweigeteilt)
   ========================== */
footer{
  position: fixed; left:0; right:0; bottom:0; height: var(--footer-h);
  color:#333;
  font-size:14px;
  text-align:center;
  z-index:1000;
}
footer .footer-top{
  height: calc(var(--footer-h) / 2);
  background: var(--page-bg);      /* ← koppelt an Main */
}

footer .footer-bottom{
  height: calc(var(--footer-h) / 2);
  background: var(--header-bg);		/* ← koppelt an Header */
  display:flex;
  align-items:center;
  justify-content: space-between;
  color: var(--header-col);			/*  #222; */
  padding: 0 20px;
  font-size: 14px;
  text-align:center;
}

footer::before{
  content:""; position:absolute; top: calc(var(--footer-h)/2);
  left:0; width:100%; height:1px; background:#000; z-index:1001;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.foot-user {
  margin-right: 8px;
  font-size: 0.85rem;
  opacity: 0.9;
}

.foot-logout-link {
  font-size: 0.85rem;
  text-decoration: none;
}
.foot-logout-link:hover {
  text-decoration: underline;
}


/* ==========================
   7) Listen-Ansicht & Sonstiges
   ========================== */
.list-section { margin-bottom: 8px; }
.dir-heading  { margin: 10px 0 6px; font-size: 16px; font-weight: 700; color: var(--muted); }
.file-list    { list-style: none; margin: 0 0 6px; padding-left: 0; }
.file-list li { padding: 4px 0; }
.file-list a  { text-decoration: none; }
.file-list a:hover { text-decoration: underline; }
.dir-sep      { border: 0; border-top: 1px dashed #e0e0e0; margin: 8px 0 14px; }

/* Tabellen & Formulare (global) */
table{
  border-collapse: collapse; width: 90%; margin: 20px auto;
  background: var(--panel-bg); border-radius: var(--radius);
  box-shadow: 0 0 8px #ccc; overflow: hidden;
}
th, td{ border:1px solid var(--border); padding:8px 10px; text-align:left; }
th{ background:#f0f0f0; }
th.erstellt, td.erstellt{ text-align:center !important; vertical-align:middle; }
form{
  background: var(--panel-bg);
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}


html, body{
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Form-Controls und Buttons erben sauber (Browser-Normalisierung) */
button, input, select, textarea {
  font: inherit;               /* inkl. family/size/weight/line-height */
}

/* Subbar & Header: hart auf Sans setzen (überstimmt Fremd-CSS) */
header, header *, .subbar, .subbar * {
  font-family: var(--font-sans) !important;
}

/* Tabellen/Listen/Links konsequent sans-serif */
table, th, td,
ul, ol, li,
a, .badge,
.wa-table, .wa-table * {
  font-family: var(--font-sans);
  letter-spacing: 0.005em;
}

/* Monospace gezielt beibehalten */
.mono, code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}
/* Robust: Footer & Subbar hart auf Sans (falls Fremd-CSS später lädt) */
footer, footer *,
.subbar, .subbar *,
header, header *{
  font-family: var(--font-sans) !important;
}
/* /global/public/css/start.css */

.start-page {
  padding: 12px 16px 20px;
}

.start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
}

/* Kacheln */
.start-tile {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;
}

.start-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.start-tile-icon {
  font-size: 1.6rem;
  margin-bottom: 6px;
}

.start-tile-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.start-tile-sub {
  font-size: 0.85rem;
  opacity: 0.8;
}