/* BikeGPT UI Standard v0.1.7‑B – Grid, FAB‑Menu und Widgets */
:root{
  --gap: 16px;
  --maxw: 1360px;
  --radius: 20px;
  --bg: #f4f7fb;
  --card: #fff;
  --text: #0f172a;
  --muted: #6b7280;
  --primary: #0ea5e9;
  --shadow: 0 10px 24px rgba(2,8,23,.08);
  --safe-bottom: env(safe-area-inset-bottom);
  --slot-minh: 220px;
  --slot-tall: 420px;
  --fab-gutter: 10px;
}

/* Dark Scheme (automatisch) */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --card:#111827;
    --text:#e5e7eb;
    --muted:#9ca3af;
    --primary:#38bdf8;
    --shadow:0 8px 20px rgba(0,0,0,.55);
  }
}

/* Explizite Themes */
html.theme-light{
  color-scheme:light;
  --bg:#f4f7fb;
  --card:#fff;
  --text:#0f172a;
  --muted:#6b7280;
  --primary:#0ea5e9;
  --shadow:0 10px 24px rgba(2,8,23,.08);
}
html.theme-dark{
  color-scheme:dark;
  --bg:#0b1220;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --primary:#38bdf8;
  --shadow:0 8px 20px rgba(0,0,0,.55);
}

/* Grundstruktur */
html, body{ height:100%; }
body.bg-app{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Typografie */
h1{ font-size:1.8rem; font-weight:700; margin:0 0 .25rem; }
h2{ font-size:1.2rem; font-weight:600; margin:0; color:var(--muted); }
h3{ font-size:1.0rem; font-weight:600; margin:0 0 10px; }
h4{ font-size:0.8rem; font-weight:600; margin:0 0 .25rem; color:var(--muted); }
p{ font-size:0.8rem; line-height:1.6; margin:0 0 .75rem; }
a{ color:var(--primary); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Grid-Aufbau: Header (2×), Main (1×), Footer (1×) */
.app-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto auto 1fr 100px;
  grid-template-areas:
    "h12 h12 h3"
    "h12 h12 h3"
    "main main main"
    "f1   f2   f3";
  max-width:var(--maxw);
  margin:0 auto;
  padding:calc(var(--gap)*1.25) var(--gap) calc(24px + var(--gap)*2 + var(--safe-bottom,0px));
  box-sizing:border-box;
  height:100vh;
  overflow:visible; /* Schlagschatten nicht abschneiden */
}
.h12{ grid-area:h12; }
.h3{
  grid-area:h3;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
  padding:0;
  background:transparent;
}

.main{
  grid-area:main;
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:minmax(var(--slot-minh),auto);
  overflow:visible;
}


.f1{ grid-area:f1; }
.f2{ grid-area:f2; }
.f3{ grid-area:f3; }

/* Card & Footer */
.card{
  background:var(--card);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 18px 22px;
}
.col-span-2{ grid-column:span 2; }
.col-span-3{ grid-column:span 3; }
.row-span-2{ grid-row:span 2; }
.footer-card{
  height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.footer-meta{
  height:100px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 var(--gap);
}
.version-hint{
  font-size:0.6rem;
  font-weight:400;
  color:var(--muted);
  text-align:right;
  margin:0;
}
.version-hint:not([data-build]){
  display:none;
}

/* Buttons */
.btn{
  --btn-bg:#e5e7eb;
  --btn-fg:#0f172a;
  --btn-bd:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-weight:600;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ --btn-bg:var(--primary); --btn-fg:#fff; }
.btn-secondary{ --btn-bg:#f3f4f6; }
.btn-outline{ --btn-bg:transparent; --btn-bd:rgba(2,8,23,.12); }
.btn-ghost{ --btn-bg:transparent; --btn-fg:var(--text); }
.btn-danger{ --btn-bg:#ef4444; --btn-fg:#fff; }
.btn-sm{ height:34px; padding:0 12px; font-size:.875rem; }
.btn-lg{ height:50px; padding:0 20px; font-size:1.0625rem; }
.btn-block{ width:100%; }
.btn-pill{ border-radius:999px; }

/* Dark Mode – Outline Buttons */
html.theme-dark .btn-outline{
  --btn-bg:transparent;
  --btn-bd:rgba(255,255,255,.35);
  --btn-fg:#fff;
}

/* Floating Action Button */
.fab{
  width:60px;
  height:60px;
  border-radius:999px;
  border:0;
  cursor:pointer;
  background:var(--primary);
  color:#fff;
  font-size:28px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 24px rgba(14,165,233,.35);
  transition:transform .12s, box-shadow .12s;
}
.fab:hover{ transform:translateY(-2px); }
.fab:active{ transform:translateY(0); }

/* Formulare */
.input, .select, .textarea{
  width:100%;
  box-sizing:border-box;
  background:var(--card);
  color:var(--text);
  border:1px solid rgba(2,8,23,.08);
  border-radius:14px;
  height:42px;
  padding:0 14px;
  box-shadow:var(--shadow);
}
.textarea{
  min-height:120px;
  padding:12px 14px;
  resize:vertical;
}
.checkbox{
  width:18px;
  height:18px;
  border-radius:6px;
  border:1px solid rgba(2,8,23,.18);
}
.switch{
  position:relative;
  width:42px;
  height:26px;
  background:#e5e7eb;
  border-radius:999px;
  display:inline-block;
  vertical-align:middle;
}
.switch::after{
  content:"";
  position:absolute;
  left:3px;
  top:3px;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  transition:left .12s;
}
.switch.is-on{ background:var(--primary); }
.switch.is-on::after{ left:19px; }

/* Tabellen */
.table{
  width:100%;
  border-collapse:collapse;
  background:var(--card);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.table thead th{
  font-weight:700;
  font-size:.9rem;
  color:var(--muted);
  background:rgba(2,8,23,.03);
}
.table th, .table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(2,8,23,.06);
  text-align:left;
}
.table tr:hover td{ background:rgba(2,8,23,.02); }
.table .num{ text-align:right; }

/* Slot & Blur Toggle */
.slot{ position:relative; }
.slot[hidden], .slot[data-visible="false"]{ display:none!important; }
.slot .slot-toggle{
  position:absolute;
  top:8px;
  right:8px;
  z-index:2;
  width:28px;
  height:28px;
  border-radius:999px;
  padding:0;
  border:1px solid rgba(2,8,23,.10);
  background:#fff;
  box-shadow:0 6px 14px rgba(2,8,23,.10);
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.slot[data-has-toggle="true"] .slot-toggle{ display:flex; }
.slot .slot-toggle::before{ content:"👁️"; font-size:16px; line-height:1; }
.slot .slot-toggle.is-off::after{
  content:"";
  position:absolute;
  width:22px;
  height:2px;
  border-radius:2px;
  background:rgba(239,68,68,.9);
  transform:rotate(-28deg);
}
.slot .slot-body{ position:relative; }
.slot .slot-body.is-blur{
  filter:blur(6px);
  pointer-events:none;
  user-select:none;
}

/* FAB‑Menü */
.fab-menu{ position:fixed; inset:0; z-index:60; }
.fab-menu[hidden]{ display:none; }
.fab-menu.is-open .fab-menu__backdrop{ opacity:1; }
.fab-menu__backdrop{
  position:absolute;
  inset:0;
  background:rgba(2,8,23,.45);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .15s;
}
.fab-menu__sheet{
  position:absolute;
  left:50%;
  top:12vh;
  transform:translateX(-50%) scale(.98);
  width:min(680px, calc(100vw - 32px));
  background:var(--card);
  color:var(--text);
  border-radius:28px;
  box-shadow:0 30px 70px rgba(2,8,23,.25);
  padding:22px 22px 22px;
  opacity:0;
  transition:opacity .15s, transform .15s;
}
.fab-menu.is-open .fab-menu__sheet{
  opacity:1;
  transform:translateX(-50%) scale(1);
}
.fab-menu__title{
  font-weight:700;
  font-size:1.25rem;
  margin:4px 72px 14px 8px;
}
.fab-menu__close{
  position:absolute;
  top:14px;
  right:16px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(2,8,23,.1);
  background:#fff;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(2,8,23,.10);
}
.fab-menu__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.fab-menu__item{
  display:block;
  background:var(--card);
  color:inherit;
  text-decoration:none;
  border-radius:18px;
  padding:16px 18px;
  border:1px solid rgba(2,8,23,.06);
  box-shadow:var(--shadow);
  transition:transform .12s, box-shadow .12s;
}
.fab-menu__item:hover{ transform:translateY(-1px); }
.fab-menu__footer{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:22px;
  padding-top:12px;
  border-top:1px solid rgba(2,8,23,.08);
}

/* Slots scrollbar in Main: verhindert, dass einzelne Karten die Höhe erzwingen */
.main > *{
  overflow-y:auto;
  min-height:0;
}

/* Media Query: Standard-Mobilansicht (unter 900 px) */
@media (max-width:900px){
  /* Grid-Layout auf 1 Spalte umstellen, FAB rechts */
  .app-grid{
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto auto auto auto;
    grid-template-areas:
      "h12 h3"
      "main main"
      "f1 f1"
      "f2 f2"
      "f3 f3";
    height:auto !important;
    overflow:visible !important;
  }
  html:not(.force-desktop) .main{
    grid-template-columns:1fr!important;
    grid-auto-rows:auto!important;
    height:auto!important;
    overflow-y:visible!important;
  }
  html:not(.force-desktop) .main > *{
    grid-column:auto / span 1!important;
  }
  html:not(.force-desktop) .main .col-span-2,
  html:not(.force-desktop) .main .col-span-3{
    grid-column:1 / -1!important;
  }
  html:not(.force-desktop) .footer-card{ height:auto; }
  .fab-menu__sheet{
    top:10vh;
    width:min(560px, calc(100vw - 24px));
  }
}

/* Force-Mobile: erzwingt mobiles Layout */
html.force-mobile .app-grid{
  grid-template-columns:1fr auto!important;
  grid-template-rows:auto auto auto auto auto!important;
  grid-template-areas:
    "h12 h3"
    "main main"
    "f1 f1"
    "f2 f2"
    "f3 f3"!important;
}
html.force-mobile .main{
  grid-template-columns:1fr!important;
  grid-auto-rows:auto!important;
  height:auto!important;
  overflow-y:visible!important;
}
html.force-mobile .main > *{
  grid-column:auto / span 1!important;
}
html.force-mobile .main .col-span-2,
html.force-mobile .main .col-span-3{
  grid-column:1 / -1!important;
}
html.force-mobile .footer-card{ height:auto!important; }

/* Force-Desktop: erzwingt Desktop-Layout */
html.force-desktop .app-grid{
  grid-template-columns:repeat(3,1fr)!important;
  grid-template-rows:auto auto 1fr 100px!important;
  grid-template-areas:
    "h12 h12 h3"
    "h12 h12 h3"
    "main main main"
    "f1   f2   f3"!important;
}
html.force-desktop .main{
  grid-template-columns:repeat(3,1fr)!important;
  grid-auto-rows:minmax(var(--slot-minh),auto)!important;
  height:100%!important;
}
html.force-desktop .footer-card{ height:100px!important; }

/* FAB-Menü-Anpassungen (Rand / Abstand) */
.fab-menu__sheet{ width:min(680px, calc(100vw - 20px)); }
@media (max-width:900px){
  .fab-menu__sheet{ width:min(560px, calc(100vw - 20px)); }
}
.fab-menu__footer .btn{
  height:42px;
  font-size:.95rem;
}
/* Sicherer Außenabstand für FAB-Menü */
.fab-menu{
  box-sizing:border-box;
  padding-left:max(var(--fab-gutter), env(safe-area-inset-left,0px));
  padding-right:max(var(--fab-gutter), env(safe-area-inset-right,0px));
}
.fab-menu__sheet{
  left:max(var(--fab-gutter), env(safe-area-inset-left))!important;
  right:max(var(--fab-gutter), env(safe-area-inset-right))!important;
  width:auto!important;
  max-width:680px;
  margin:0 auto!important;
  transform:scale(.98)!important;
}
.fab-menu.is-open .fab-menu__sheet{ transform:scale(1)!important; }
@media (max-width:900px){
  .fab-menu__sheet{ max-width:560px; }
}

/* Slot-Höhen für mobile & Desktop */
@media (min-width:901px){
  .app-grid .main{
    grid-auto-rows:minmax(var(--slot-minh),1fr)!important;
  }
}
@media (max-width:900px){
  .app-grid .main{ grid-auto-rows:auto!important; }
  .app-grid .main .row-span-2{ grid-row:auto / span 1!important; }
  .slot.tall{ min-height:var(--slot-tall); }
}
html.force-mobile .main{ grid-auto-rows:auto!important; }
html.force-mobile .main .row-span-2{ grid-row:auto / span 1!important; }
html.force-mobile .slot.tall{ min-height:var(--slot-tall); }
/* [[BGPT:DESKTOP-GRID-V1-BEGIN]] */
/* Globale Tokens (Abstände/Höhen) */
:root{
  --grid-gap:16px;
  --H12:96px;   /* Header-Zeile */
  --H3:64px;    /* FAB/Toolbar-Zeile */
  --F3:28px;    /* Footer-Zeile (Version) */
  --rows-visible:2; /* Anzahl Slot-Reihen, die voll sichtbar sein sollen */
}

/* Grundlayout */
.app-grid{
  min-height: 100vh;
  padding: var(--grid-gap);
  display: grid;
  gap: var(--grid-gap);
}

/* Feste Zeilen für Header/FAB/Footer, Main füllt den Rest */
@media (min-width: 1024px){
  .app-grid{
    grid-template-rows: var(--H12) var(--H3) 1fr var(--F3);
    grid-template-columns: 1fr;
    align-content: start;
  }
  /* Header-/FAB-Zeilen höhenstabil halten */
  .h12{ height: var(--H12); }
  .h3 { height: var(--H3);  }

  /* 3-Spalten-Main-Grid */
  .main{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
    align-content: start;
  }

  /* Slot-Höhe so berechnen, dass genau 2 Reihen sichtbar sind */
  .slot .slot-body{
    /* 100vh abzüglich fester Zeilen + Lücken:
       H12 + H3 + F3 + (Lücken: 3 Zeilen-Gaps + 1 Gap über F3 + Zeilengaps zwischen den Slot-Reihen)
     */
    min-height: calc(
      ( 100vh
        - var(--H12)
        - var(--H3)
        - var(--F3)
        - (var(--grid-gap) * 5)      /* Puffer für horizontale Linien & Außenabstände */
      ) / var(--rows-visible)
    );
  }
}
/* [[BGPT:DESKTOP-GRID-V1-END]] */
/* [[BGPT:DESKTOP-GRID-V1.1-BEGIN]] */
@media (min-width: 1024px){
  /* Mehr nutzbare Breite */
  .app-grid{ max-width: 1600px; margin-inline: auto; }

  /* 3-Spalten-Grid bleibt stabil */
  .main{
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr; /* gleich hohe Zeilen */
  }

  /* Slot-Höhe so, dass 2 Reihen voll sichtbar sind (inkl. Titel/Gaps) */
  .slot { display:flex; flex-direction:column; }
  .slot > h3 { margin: 0 0 8px 0; }
  .slot .slot-body{
    min-height: calc(
      ( 100vh
        - var(--H12)       /* Header-Zeile */
        - var(--H3)        /* FAB-Zeile   */
        - var(--F3)        /* Footer      */
        - (var(--grid-gap) * 6)  /* Außen + Zeilen-Gaps */
      ) / var(--rows-visible)
      - 32px               /* Titel + Innenabstände grob kompensieren */
    );
  }
}
/* [[BGPT:DESKTOP-GRID-V1.1-END]] */
/* [[BGPT:DESKTOP-GRID-FORCE-3COL-BEGIN]] */
@media (min-width:1024px){
  .app-grid .main{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: var(--grid-gap) !important;
    align-content: start !important;
  }
  /* Overflow-Schutz, damit Karten nicht umbrechen */
  .app-grid .slot{ min-width: 0; }
}
/* [[BGPT:DESKTOP-GRID-FORCE-3COL-END]] */
/* [[BGPT:DESKTOP-GRID-FORCE-ALL-BEGIN]] */
/* Erzwinge 3 Spalten für SA-Dashboard & Builder (überstimmt frühere Regeln) */
.app-grid.tool-sa-dashboard .main,
.app-grid.tool-builder .main{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: var(--grid-gap) !important;
  align-content: start !important;
}
.app-grid.tool-sa-dashboard .main > *,
.app-grid.tool-builder .main > *{ min-width: 0; }
/* [[BGPT:DESKTOP-GRID-FORCE-ALL-END]] */
/* [[BGPT:DESKTOP-GRID-FORCE-HEIGHT-BEGIN]] */
@media (min-width:1024px){
  /* 3 Spalten sicher aktiv (zusätzlich zu FORCE-ALL) */
  .app-grid.tool-sa-dashboard .main,
  .app-grid.tool-builder .main{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:var(--grid-gap) !important;
    align-content:start !important;
  }
  /* Zwei Reihen sichtbar: Höhe pro Slot erzwingen */
  .app-grid.tool-sa-dashboard .slot .slot-body,
  .app-grid.tool-builder .slot .slot-body{
    min-height: calc(
      ( 100vh
        - var(--H12)
        - var(--H3)
        - var(--F3)
        - (var(--grid-gap) * 6)
      ) / 2 - 28px
    ) !important;
  }
}
/* [[BGPT:DESKTOP-GRID-FORCE-HEIGHT-END]] */
/* [[BGPT:DESKTOP-GRID-FORCE-SA-SETTINGS-BEGIN]] */
@media (min-width:1024px){
  /* 3 Spalten hart aktiv für SA-Settings (Laravel) */
  .app-grid.tool-sa-settings .main{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:var(--grid-gap) !important;
    align-content:start !important;
  }
  .app-grid.tool-sa-settings .main > *{ min-width:0; }

  /* Zwei Reihen Slots voll sichtbar (wie Dashboard) */
  .app-grid.tool-sa-settings .slot .slot-body{
    min-height: calc(
      ( 100vh
        - var(--H12)
        - var(--H3)
        - var(--F3)
        - (var(--grid-gap) * 6)
      ) / 2 - 28px
    ) !important;
  }
}
/* [[BGPT:DESKTOP-GRID-FORCE-SA-SETTINGS-END]] */
/* [[BGPT:CSS-BUMP-20251105085709]] */
/* [[BGPT:SA-DASHBOARD-FINAL-GRID-BEGIN]] */
@media (min-width:1024px){
  .app-grid.tool-sa-dashboard .main{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:var(--grid-gap)!important;
    align-content:start!important;
  }
  .app-grid.tool-sa-dashboard .main > *{min-width:0;}
  .app-grid.tool-sa-dashboard .slot .slot-body{
    min-height:calc(
      (100vh - var(--H12) - var(--H3) - var(--F3) - (var(--grid-gap)*6)
      )/2 - 28px
    )!important;
  }
}
/* [[BGPT:SA-DASHBOARD-FINAL-GRID-END]] */
.slot > h2 { margin: 0 0 10px 0; }
/* BGPT cache-bump 1762349898 */