@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  :root{
    --base-clr: #11121a;
    --line-clr: #42434a;
    --hover-clr: #222533;
    --text-clr: #e6e6ef;
    --danger:#CC4949;
    --accent-clr: hsl(93, 32%, 54%);
    --accent-hover-clr: hsl(83, 32%, 54%);
    --secondary-text-clr: #b0b3c1;

    --primary-900: hsl(256, 43%, 7%);
    --primary-800: hsl(240, 24%, 13%);
    --primary-700: hsl(243, 26%, 15%);
    --primary-600: hsl(252, 9%, 22%);
    --primary-500: hsl(259, 13%, 28%);
    --primary-400: hsl(254, 22%, 32%);

    --primary-300: hsl(251, 13%, 68%);
    --primary-200: hsl(240, 15%, 76%);
    --primary-100: hsl(240, 21%, 88%);

    --neutral-100: hsl(0, 0%, 100%);

    --accent-400: hsl(93, 60%, 69%);
    --accent-500: hsl(93, 60%, 79%);

    --text-1: var(--neutral-100);
    --text-2: var(--primary-100);
    --text-3: var(--primary-200);

    --surface-1: var(--primary-900);
    --surface-2: var(--primary-800);
    --surface-3: var(--primary-700);

    --border-1: var(--primary-500); /* top */
    --border-2: var(--primary-600); /* bottom */
  }
  *{
    margin: 0;
    padding: 0;
  }
  html{
    height: auto;
    min-height: 100%;
    overflow-y: auto;   /* zeigt erst einen Balken, wenn nötig */
    overflow-x: hidden;
    font-family: Poppins, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.5rem;
  }
  body{
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--text-clr);
    display: grid;
    grid-template-columns: auto 1fr;
    background:url(space.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
  }
  #sidebar{
    box-sizing: border-box;
    height: 100vh;
    width: 250px;
    padding: 5px 1em;
    background-color: rgb(57, 85, 111, 0.1);
    border-right: 1px solid var(--line-clr);
    position: sticky;
    top: 0;
    align-self: start;
    transition: 300ms ease-in-out;
    overflow: hidden;
    text-wrap: nowrap;
  }
  #sidebar.close{
    padding: 5px;
    width: 60px;
  }
  #sidebar ul{
    list-style: none;
  }
  #sidebar > ul > li:first-child{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
    .logo{
      font-weight: 600;
    }
  }
  #sidebar ul li.active a{
    color: var(--accent-clr);

    svg{
      fill: var(--accent-clr);
    }
  }

  #sidebar a, #sidebar .dropdown-btn, #sidebar .logo{
    border-radius: .5em;
    padding: .85em;
    text-decoration: none;
    color: var(--text-clr);
    display: flex;
    align-items: center;
    gap: 1em;
  }
  .dropdown-btn{
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
  }
  #sidebar svg{
    flex-shrink: 0;
    /*fill: var(--text-clr);*/
  }
  #sidebar a span, #sidebar .dropdown-btn span{
    flex-grow: 1;
  }
  #sidebar a:hover, #sidebar .dropdown-btn:hover{
    background-color: var(--hover-clr);
  }
  #sidebar .sub-menu{
    display: grid;
    grid-template-rows: 0fr;
    transition: 300ms ease-in-out;

    > div{
      overflow: hidden;
    }
  }
  #sidebar .sub-menu.show{
    grid-template-rows: 1fr;
  }
  .dropdown-btn svg{
    
    transition: 200ms ease;
  }
  .rotate svg:last-child{
    rotate: 180deg;
  }
  #sidebar .sub-menu a{
    padding-left: 2em;
  }
  #toggle-btn{
    margin-left: auto;
    padding: 1em;
    border: none;
    border-radius: .5em;
    background: none;
    cursor: pointer;
    svg{
      transition: rotate 150ms ease;
    }
  }
  #toggle-btn:hover{
    background-color: var(--hover-clr);
  }
  .activeToggleBtn{ color:red;}

main{
  padding: min(30px, 7%);
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding:10px;
}
.container {
    background-color: rgb(57, 85, 111, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 10px;
    padding: 40px 25px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    text-align: center;
}
.container h2 {
    font-size: 22px;
    margin-bottom: 30px;
    color: #ffffff;
}
/* Button (full green button) */
.btn {
    margin: 1.5rem 0 1.5rem 0;
    padding: 10px 20px 10px 20px;
    font-size: 14px;
    border: none;
    border-radius: 6px;
    background-color: var(--accent-clr);
    color: var(--text-clr);
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn:hover {
    background-color: var(--accent-hover-clr);
}
.new-db-button-wrapper {
    padding:1.5rem;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.new-db-button {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background:transparent;
    border:none;
    }
.new-db-button svg {
    width: 32px;
    height: 32px;
    fill:var(--text-clr);
}

.new-db-button:hover svg {
    fill: var(--accent-clr);

}
/* inputfield*/
.master {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: hsl(from var(--surface-1) h s l / 0.5);
  color: var(--text-1);
  margin-bottom: 1rem;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  transition: border-color 150ms ease; /* smooth */
}

.master:focus,
.master:focus-visible {
  border-color: var(--accent-clr);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in hsl, var(--accent-clr) 30%, transparent);
}


/* =========================== */
/* Modal -new masterpsw        */
/* =========================== */

.modal-overlay{
  position: fixed;
  inset: 0;                          /* top:0;right:0;bottom:0;left:0 */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;               /* oder flex-start, wenn du sie oben ausrichten willst */
  justify-content: center;
  padding: 16px;
  background-color: rgba(0,0,0,0.7);
  z-index: 9999;

  /* Show/Hide via class */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;

  /* wichtig: Overlay selbst scrollt NICHT -> kein fetter System-Scrollbar */
  overflow: hidden;
}
.modal-overlay.show{
  opacity: 1;
  pointer-events: auto;
}

.modal-box{
  background-color: #16171a;
  color: #ddd;
  width: min(500px, 90vw);
  max-height: 92vh;                  /* nur die Box scrollt */
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* smooth iOS */
  border-radius: 12px;
  padding: 2.2rem;
  box-shadow: 0 0 15px rgba(0,0,0,0.6);
  text-align: center;
}

/* Schlanker dunkler Scrollbar NUR in der Box */
.modal-box{
  scrollbar-width: thin;                 /* Firefox */
  scrollbar-color: #3a3f46 transparent;
}
.modal-box::-webkit-scrollbar{           /* Chromium/WebKit */
  width: 8px; height: 8px;
}
.modal-box::-webkit-scrollbar-track{
  background: transparent;
}
.modal-box::-webkit-scrollbar-thumb{
  background: #3a3f46;
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.modal-box::-webkit-scrollbar-thumb:hover{
  background: #4a505a;
}
.modal-box::-webkit-scrollbar-corner{
  background: transparent;
}
.modal-box .q{
  padding: 8px !important;
  margin-bottom: 8px !important;
}
.modal-box .q > div:first-child{
  gap: 6px !important;
}
.modal-box .q .inputModal{
  margin-top: 6px !important;
  height: 36px;
  font-size: 14px;
  padding: 8px 10px;
}
.modal-box .sticky-actions{
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(22,23,26,0) 0%, #16171a 40%);
  backdrop-filter: blur(2px);
  z-index: 1;
}
.modal-box .sticky-actions .note{
  color: #9aa1aa;
  font-size: 12.5px;
  line-height: 1.3;
  max-width: 70%;
}
.modal-box .sticky-actions .actions .btn{
  white-space: nowrap;
}

/* alias */
.alias-gallery{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 Spalten selbst auf schmalen Screens */
  gap: 8px;
}
@media (min-width: 520px){
  .alias-gallery{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 820px){
  .alias-gallery{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.alias-card{
  background: #15171a;
  border: 1px solid #2a2d31;
  border-radius: 10px;
  padding: 8px;
  display: grid;
  gap: 6px;
}
.alias-card .alias{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  padding: 6px 8px;
  border-radius: 8px;
  background: #0f1114;
  border: 1px solid #1e2228;
  text-align: center;
  overflow-wrap: anywhere;
}
.alias-card .note{
  color: #9aa1aa;
  font-size: 11.5px;
  text-align: center;
}
.alias-card .btn{
  padding: 8px 10px;
  font-size: 13px;
}

/* Genereller Typo-Compact im Modal */
.modal-box h4{ margin: 4px 0 8px 0; font-size: 16px; }
.modal-box .pw-criteria li{ line-height: 1.25; }

/* Inputs im Dark Mode */
.inputModal {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border-color:transparent;
    background: hsl(from var(--surface-1) h s l / 0.5);
    color: var(--text-1);
    margin-bottom: 20px;
    font-size: 16px;
    box-sizing: border-box;
}

.inputModal::placeholder { color: #7d838a; }
.inputModal:focus {
  outline: none;
  border-color: var(--accent-clr);
  box-shadow: 0 0 0 3px rgba(237,106,18,0.2);
}
/* Abstand zwischen Passwortfeldern */
.inputModal + .inputModal {
  margin-top: 8px;
}

/* Button-Reihe */
.button-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}
.btn, .cancelBtn {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid #2a2d31;
  background: #1f2125;
  color: #eee;
  cursor: pointer;
}
.btn { border-color: var(--accent-clr); }
.btn:hover { background: #24272c; }
.cancelBtn:hover { background: #23262a; }

/* Checkbox + Label: wirklich mittig unter dem Input */
.checkbox-wrapper {
  display: flex;
  align-items: center;        /* vertikal zentriert */
  justify-content: center;    /* horizontal zentriert */
  gap: 8px;
  margin: 10px 0 6px;
  line-height: 1.2;
}

/* Custom Checkbox */
.checkbox-wrapper input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #666;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
  background-color: #212325;
  transition: all 0.2s ease;
  flex: 0 0 18px;             /* verhindert Stretching in Flex */
}
.checkbox-wrapper input[type="checkbox"]:hover { border-color: var(--accent-clr); }
.checkbox-wrapper input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(237,106,18,0.35);
  border-color: var(--accent-clr);
}
.checkbox-wrapper input[type="checkbox"]:checked {
  background-color: var(--accent-clr);
  border-color: var(--accent-clr);
}
.checkbox-wrapper input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Label-Stil im Dark Mode */
.checkbox-wrapper label {
  color: #c9c9c9;
  cursor: pointer;            /* Klick auf Text setzt Häkchen */
  user-select: none;
}
.error-box{
  color:var(--danger);
  font-weight: bold;
  padding-bottom:1.2rem;
  letter-spacing: normal;
}
.success-box{
  color:var(--accent-clr);
  font-weight: bold;
  padding-bottom:1.2rem;
  letter-spacing: normal;
}
/* Fußnote im Modal */
.modal-box .modal-footnote {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.4;
  color: #999;
  text-align: center;
}

/* Link im Dark Mode */
.modal-box .modal-footnote a {
  color: var(--accent-clr);
  text-decoration: none;
}
.modal-box .modal-footnote a:hover {
  text-decoration: underline;
}
/* JS validation New masterpassword)*/

/* Kriterienliste unter dem ersten Passwortfeld */
.pw-criteria {
  list-style: none;
  padding-left: 0;
  margin: 8px 0 0 0;
  text-align: left;        /* bleibt hübsch, auch wenn die Modal-Überschrift zentriert ist */
  display: inline-block;   /* damit die Liste nicht volle Breite zieht */
}
.pw-criteria li {
  color: #888;
  line-height: 1.35;
  position: relative;
  padding-left: 18px;
}
.pw-criteria li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
}
.pw-criteria li.ok {
  color: var(--accent-clr);
}
.pw-criteria li.ok::before {
  content: "✓";
  opacity: 1;
}

/* Match-Status unter dem zweiten Feld */
.pw-match {
  margin-top: 6px;
  font-size: 12px;
  text-align: left;
  color: #999;
}
.pw-match.ok   { color: var(--accent-clr); }
.pw-match.bad  { color: var(--danger); }
/* Input + Eye-Button-Wrapper */
.pw-field { position: relative; width: 100%; }
.pw-field .inputModal { padding-right: 42px; } /* Platz für Button */

/* Eye-Button (press-and-hold) */
.pw-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border: 1px solid #2a2d31;
  background: #1f2125;
  color: #ccc;
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.pw-toggle svg path { fill: #999; }
.pw-toggle:hover { background: #24272c; }
.pw-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(237,106,18,0.35);
  border-color: var(--accent-clr);
}





@media(max-width: 800px){
  body{
    grid-template-columns: 1fr;
  }
  main{
    padding: 2em 1em 60px 1em;
  }
  .container{
    border: none;
    padding: 5px;
  }
  .master{
    width:90%;
  }
  .copyright {
    padding-bottom: 1rem;
    font-size:0.9rem;
  }
  #sidebar{
    height: 60px;
    width: 100%;
    background-color: var(--base-clr);
    border-right: none;
    border-top: 1px solid var(--line-clr);
    padding: 0;
    position: fixed;
    top: unset;
    bottom: 0;

    > ul{
      padding: 0;
      display: grid;
      grid-auto-columns: 60px;
      grid-auto-flow: column;
      align-items: center;
      overflow-x: scroll;
    }
    ul li{
      height: 100%;
    }
    ul a, ul .dropdown-btn{
      width: 60px;
      height: 60px;
      padding: 0;
      border-radius: 0;
      justify-content: center;
    }

    ul li span, ul li:first-child, .dropdown-btn svg:last-child{
      display: none;
    }

    ul li .sub-menu.show{
      position: fixed;
      bottom: 60px;
      left: 0;
      box-sizing: border-box;
      height: 60px;
      width: 100%;
      background-color: var(--hover-clr);
      border-top: 1px solid var(--line-clr);
      display: flex;
      justify-content: center;

      > div{
        overflow-x: auto;
      }
      li{
        display: inline-flex;
      }
      a{
        box-sizing: border-box;
        padding: 1em;
        width: auto;
        justify-content: center;
      }
    }
  }
  .modal-overlay{ padding: 16px 8px; }
  .modal-box{ max-height: 92vh; }
}

/* ===== Alias: Galerie immer im Grid ===== */
.modal-box .alias-gallery{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important; /* 2 Spalten auch auf Mobile */
  gap: 8px !important;
  padding-bottom: 64px; /* Platz, damit letzte Reihe nicht unter die Sticky-Leiste rutscht */
}
@media (min-width: 520px){
  .modal-box .alias-gallery{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (min-width: 820px){
  .modal-box .alias-gallery{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}

/* Karten: wieder mit Rand, kompakter, kein Default-Form-Margin */
.modal-box .alias-card{
  margin: 0 !important;
  background: #15171a !important;
  border: 1px solid #2a2d31 !important;
  border-radius: 10px !important;
  padding: 8px !important;
  display: grid !important;
  gap: 6px !important;
}
.modal-box .alias-card .alias{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 14px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  background: #0f1114 !important;
  border: 1px solid #1e2228 !important;
  text-align: center !important;
  overflow-wrap: anywhere !important;
}
.modal-box .alias-card .btn{
  padding: 6px 10px !important;   /* kleinerer Button */
  font-size: 13px !important;
  margin: 0 !important;
}
@media (max-width: 520px){
  .modal-box .alias-card{ padding: 6px !important; gap: 4px !important; }
  .modal-box .alias-card .alias{ font-size: 13px !important; padding: 5px 7px !important; }
  .modal-box .alias-card .btn{ padding: 5px 8px !important; font-size: 12px !important; }
}

/* Fragekarten noch kompakter */
.modal-box .q{ padding: 8px !important; margin-bottom: 8px !important; }
.modal-box .q > div:first-child{ gap: 6px !important; }
.modal-box .q .inputModal{
  margin-top: 6px !important;
  height: 36px !important;
  font-size: 14px !important;
  padding: 8px 10px !important;
}

/* Sticky-Aktionsleiste: wirklich sticky im Scroll-Container (.modal-box) */
.modal-box{
  position: relative; /* stacking context für sticky */
}
.modal-box .sticky-actions{
  position: sticky !important;
  bottom: 0 !important;
  left: 0; right: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 0 0 0 !important;
  margin-top: 8px !important;

  /* Hintergrund, damit sie sich abhebt */
  background: linear-gradient(180deg, rgba(22,23,26,0) 0%, #16171a 60%) !important;
  z-index: 2 !important;
}
.modal-box .sticky-actions .note{
  color: #9aa1aa !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
  max-width: 72% !important;
}
.modal-box .sticky-actions .actions .btn{ white-space: nowrap !important; }
/* ===== Alias Step – compact & responsive ===== */

/* Fragekarten (Q) kompakter */
.modal-box .q{
  background:#1c1e22;
  border:1px solid #2a2d31;
  border-radius:10px;
  padding:10px;
  margin-bottom:8px;            /* enger Abstand zur nächsten Frage */
}
@media (max-width:520px){
  .modal-box .q{ padding:8px; margin-bottom:6px; }
}

/* Kopfzeile in der Fragekarte (Frage + ↻) */
.modal-box .q-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

/* Antwortfeld in der Fragekarte – sehr kompakt */
.modal-box .q .inputModal{
  margin-top:6px;               /* Abstand Label/Text zur Inputbox */
  height:36px;
  font-size:14px;
  padding:8px 10px;
}
@media (max-width:520px){
  .modal-box .q .inputModal{
    height:34px;
    font-size:13px;
    padding:6px 8px;
  }
}

/* Global im Modal: Standard-Margen der Inputs neutralisieren */
.modal-box .inputModal{ margin:0; }

/* ↻-Button einheitlich */
.modal-box .icon-btn{
  width:32px; height:32px;
  border-radius:8px;
  border:1px solid #2a2d31;
  background:#1f2125;
  color:#eee;
  cursor:pointer;
}
.modal-box .icon-btn:hover{ background:#23262a; }

/* Separator & Digits – zwei Spalten, 1/3–2/3 */
.modal-box .fields-2{
  display:grid;
  grid-template-columns: 1fr 2fr;
  gap:10px;
  align-items:start;
  margin-top:8px;
}
@media (max-width:520px){
  .modal-box .fields-2{ gap:8px; }
}

/* Feldcontainer + Label kompakt */
.modal-box .field{
  min-width:0;
  display:grid;
  grid-template-rows:auto auto;
}
.modal-box .field > label{
  margin:0 0 4px;
  color:#9aa1aa;
  font-size:12px;
  line-height:1.2;
}
@media (max-width:520px){
  .modal-box .field > label{ margin-bottom:2px; font-size:11.5px; }
}

/* Die beiden kleinen Inputs (Sep/Digits) mittig & kompakt */
.modal-box #alias_sep,
.modal-box #alias_num{
  height:36px;
  text-align:center;
}
@media (max-width:520px){
  .modal-box #alias_sep,
  .modal-box #alias_num{
    height:34px;
  }
}

/* Galerie der Alias-Vorschläge: immer Grid */
.modal-box .alias-gallery{
  display:grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important; /* 2 Spalten auch mobil */
  gap:8px !important;
  padding-bottom:64px; /* Platz, damit nichts unter die sticky Leiste rutscht */
}
@media (min-width:520px){
  .modal-box .alias-gallery{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (min-width:820px){
  .modal-box .alias-gallery{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}

/* Karten kompakt + Rand */
.modal-box .alias-card{
  margin:0 !important;
  background:#15171a !important;
  border:1px solid #2a2d31 !important;
  border-radius:10px !important;
  padding:8px !important;
  display:grid !important;
  gap:6px !important;
}
.modal-box .alias-card .alias{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size:14px !important;
  padding:6px 8px !important;
  border-radius:8px !important;
  background:#0f1114 !important;
  border:1px solid #1e2228 !important;
  text-align:center !important;
  overflow-wrap:anywhere !important;
}
.modal-box .alias-card .note{
  color:#9aa1aa;
  font-size:11.5px;
  text-align:center;
}
.modal-box .alias-card .btn{
  padding:6px 10px !important;        /* kleinerer Button */
  font-size:13px !important;
  margin:0 !important;
}
@media (max-width:520px){
  .modal-box .alias-card{ padding:6px !important; gap:4px !important; }
  .modal-box .alias-card .alias{ font-size:13px !important; padding:5px 7px !important; }
  .modal-box .alias-card .btn{ padding:5px 8px !important; font-size:12px !important; }
}

/* Sticky-Aktionsleiste wirklich sticky im Scroll-Container */
.modal-box{ position:relative; }
.modal-box .sticky-actions{
  position:sticky;
  bottom:0;
  left:0; right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:8px 0 0 0;
  margin-top:8px;
  background: linear-gradient(180deg, rgba(22,23,26,0) 0%, #16171a 60%);
  z-index:2;
}
.modal-box .sticky-actions .note{
  color:#9aa1aa;
  font-size:12.5px;
  line-height:1.3;
  max-width:72%;
}
.modal-box .sticky-actions .actions .btn{ white-space:nowrap; }
/* Mobile: Sticky-Bar zweizeilig, Button oben rechts, Tip darunter */
@media (max-width: 520px){
  .modal-box .sticky-actions{
    flex-direction: column-reverse;    /* Actions oben, Note darunter */
    align-items: stretch;
    gap: 6px;
    padding: 8px 0 0 0;
  }
  .modal-box .sticky-actions .actions{
    display: flex;
    justify-content: flex-end;         /* Button rechts */
  }
  .modal-box .sticky-actions .note{
    max-width: 100%;
    font-size: 11.5px;                 /* etwas kleiner auf Mobile */
    line-height: 1.35;
    text-align: left;                   /* falls lieber zentriert: center */
  }

  /* Platz nach unten vergrößern, damit letzte Cards nicht unter die Sticky-Leiste rutschen */
  .modal-box .alias-gallery{
    padding-bottom: 96px !important;
  }
}
/* === Modal breiter & kompakter Padding === */
.modal-box{
  width: min(560px, 94vw) !important;   /* vorher 500/90 */
  padding: 1.6rem !important;           /* vorher 2.2rem */
}
@media (max-width: 520px){
  .modal-box{
    width: 96vw !important;
    padding: 16px 12px !important;      /* schmalere Ränder auf Mobile */
  }
}

/* === Sticky-Bar: Desktop bleibt nebeneinander; Mobile → 2 Zeilen === */
.modal-box .sticky-actions .note{
  text-align: left !important;          /* sicher links, überschreibt center */
}

/* Mobile: Button oben rechts, Tip darunter; enger Abstand */
@media (max-width: 520px){
  .modal-box .sticky-actions{
    flex-direction: column-reverse !important;  /* Actions oben, Note unten */
    align-items: stretch !important;
    gap: 4px !important;                         /* enger als vorher */
    padding-top: 6px !important;
    margin-top: 6px !important;
  }
  .modal-box .sticky-actions .actions{
    display: flex !important;
    justify-content: flex-end !important;       /* Button rechtsbündig */
  }
  .modal-box .sticky-actions .actions .btn{
    margin: 0 !important;
  }
  .modal-box .sticky-actions .note{
    max-width: 100% !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  /* Platz unten, damit Karten nicht unter die Sticky-Bar rutschen */
  .modal-box .alias-gallery{
    padding-bottom: 80px !important;    /* vorher evtl. 96px */
  }
}

/* === Fragen-Blöcke noch enger (unten) === */
.modal-box .q{
  margin-bottom: 6px !important;        /* vorher 8px */
}
@media (max-width: 520px){
  .modal-box .q{ margin-bottom: 4px !important; }
}

/* === Separator/Digits: Labels direkt über Inputs, sehr kompakt === */
.modal-box .field > label{
  margin: 0 0 2px !important;           /* vorher 4px */
  font-size: 11.5px !important;
  line-height: 1.2 !important;
}
.modal-box #alias_sep,
.modal-box #alias_num{
  height: 34px !important;              /* minimal niedriger */
  text-align: center !important;
}
/* === Sticky-Bar: solide, näher am Content, gut lesbar === */
.modal-box .sticky-actions{
  position: sticky !important;
  bottom: 0 !important;
  left: 0; right: 0;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;

  /* kompakter */
  padding: 6px 0 !important;
  margin-top: 6px !important;

  /* statt starkem Verlauf: solide Fläche + feine Trennlinie */
  background: #16171a !important;
  border-top: 1px solid #2a2d31 !important;

  z-index: 3 !important;
}

/* Note lesbar und linksbündig */
.modal-box .sticky-actions .note{
  text-align: left !important;
  color: #a7afba !important;
  font-size: 12.5px !important;
  line-height: 1.35 !important;
  max-width: 72% !important;
}

/* Actions kompakt */
.modal-box .sticky-actions .actions .btn{
  margin: 0 !important;
}

/* Galerie: nur kleines Padding unten, damit nichts unter die Sticky-Bar rutscht */
.modal-box .alias-gallery{
  padding-bottom: 44px !important;  /* vorher deutlich größer */
}

/* Mobile: zweizeilig (Button oben rechts, Tip darunter) + enger Abstand */
@media (max-width: 520px){
  .modal-box .sticky-actions{
    flex-direction: column-reverse !important; /* Button oben, Note unten */
    align-items: stretch !important;
    gap: 4px !important;
    padding: 6px 0 !important;
    margin-top: 6px !important;
  }
  .modal-box .sticky-actions .actions{
    display: flex !important;
    justify-content: flex-end !important;
  }
  .modal-box .sticky-actions .note{
    max-width: 100% !important;
    font-size: 11.5px !important;
  }
  .modal-box .alias-gallery{
    padding-bottom: 56px !important;  /* zweizeilige Sticky-Bar einkalkulieren */
  }
}
/* === Safe-area aware sticky footer for the modal === */

/* iOS/Android: liefert >0px, sonst 0 */
:root{ --safe-bottom: env(safe-area-inset-bottom); }

/* Sticky-Bar: sitzt über der Systemleiste und hat unten Extra-Polster */
.modal-box .sticky-actions{
  position: sticky !important;
  bottom: var(--safe-bottom, 0px) !important;      /* hebe sie um die Safe-Area an */
  padding-bottom: calc(6px + var(--safe-bottom, 0px)) !important;
  background: #16171a !important;
  border-top: 1px solid #2a2d31 !important;
  z-index: 3 !important;
}

/* Galerie: genug Platz unterhalb, damit letzte Cards nicht „unter“ die Sticky-Bar rutschen */
.modal-box .alias-gallery{
  padding-bottom: calc(48px + var(--safe-bottom, 0px)) !important; /* vorher war das zu wenig */
}

/* Falls dein Overlay selbst am Rand klebt: gib ihm ebenfalls Safe-Area-Polster */
.modal-overlay{
  padding-bottom: max(16px, var(--safe-bottom, 0px)) !important;
}

/* Mobile: zweizeilig (Button oben rechts, Tip darunter) + enger Abstand */
@media (max-width: 520px){
  .modal-box .sticky-actions{
    flex-direction: column-reverse !important; /* Actions oben, Note unten */
    align-items: stretch !important;
    gap: 4px !important;
    padding-top: 6px !important;
  }
  .modal-box .sticky-actions .actions{
    display: flex !important;
    justify-content: flex-end !important;
  }
  .modal-box .sticky-actions .note{
    text-align: left !important;
    max-width: 100% !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
  .modal-box .alias-gallery{
    padding-bottom: calc(64px + var(--safe-bottom, 0px)) !important; /* zweizeilige Sticky-Bar einkalkulieren */
  }
}
/* ---- Safe-area support ---- */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }

/* Höhe der Sticky-Zeile grob annehmen (Button+Text) */
.modal-box { 
  --sticky-h: 54px;           /* ~44–60px, je nach Buttonzeile – ggf. feintunen */
  --sticky-gap: 8px;          /* kleiner Abstand über Cards */
  /* Platz UNTERHALB des Inhalts reservieren, damit nichts hinter der Sticky-Leiste landet */
  padding-bottom: calc(var(--sticky-h) + var(--sticky-gap) + var(--safe-bottom)) !important;
}

/* Sticky-Leiste sitzt sichtbar ÜBER der Systemleiste und etwas über dem Rand */
.modal-box .sticky-actions{
  position: sticky !important;
  bottom: calc(var(--safe-bottom) + 6px) !important;  /* hebt sie sicher über die Taskleiste */
  background: #16171a !important;
  border-top: 1px solid #2a2d31 !important;
  z-index: 3 !important;
  padding: 6px 0 !important;
  margin-top: 6px !important;
}

/* Galerie: KEIN zusätzliches Bottom-Padding mehr (wir reservieren über .modal-box) */
.modal-box .alias-gallery{
  padding-bottom: 0 !important;
}

/* Mobile: zweizeilig (Button oben rechts, Tipp darunter), enger Abstand */
@media (max-width: 520px){
  .modal-box .sticky-actions{
    flex-direction: column-reverse !important; /* Actions oben, Note unten */
    align-items: stretch !important;
    gap: 4px !important;
  }
  .modal-box .sticky-actions .actions{
    display: flex !important;
    justify-content: flex-end !important;
  }
  .modal-box .sticky-actions .note{
    text-align: left !important;
    max-width: 100% !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
}
/* --- Safe-area vars --- */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --sticky-h: 54px;                 /* ungefähre Höhe aus Button + Tipp */
}

/* Overlay respektiert Safe-Area oben/unten */
.modal-overlay{
  padding-top: max(16px, var(--safe-top)) !important;
  padding-bottom: max(16px, var(--safe-bottom)) !important;
}

/* 1) Gap unten entfernen & Header oben nicht anschneiden */
.modal-box{
  padding-bottom: 0 !important;                              /* entfernt den „Spalt“ */
  padding-top: calc(1.6rem + (var(--safe-top) * 0.25)) !important; /* etwas mehr Luft oben */
}

/* 2) Sticky-Leiste sitzt sichtbar über der Taskleiste, ohne Loch */
.modal-box .sticky-actions{
  position: sticky !important;
  bottom: calc(var(--safe-bottom) + 10px) !important;         /* über Systemleiste */
  background: #16171a !important;
  border-top: 1px solid #2a2d31 !important;
  padding: 6px 0 calc(6px + var(--safe-bottom)) 0 !important;/* sicher nicht abgeschnitten */
  margin-top: 6px !important;
  z-index: 3 !important;
}

/* 3) Platz NUR unter der Galerie reservieren (nicht an der ganzen Box) */
.modal-box .alias-gallery{
  padding-bottom: calc(var(--sticky-h) + var(--safe-bottom) + 8px) !important;
}

/* Mobile: zweizeilig (Button oben rechts, Tipp darunter) + enge Abstände */
@media (max-width: 520px){
  .modal-box .sticky-actions{
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 4px !important;
  }
  .modal-box .sticky-actions .actions{
    display: flex !important;
    justify-content: flex-end !important;
  }
  .modal-box .sticky-actions .note{
    text-align: left !important;
    max-width: 100% !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
}
/* ===== Mobile-only Fix (≤520px): Sticky-Bar sichtbar & näher am Content ===== */
@media (max-width: 520px){
  :root{ --safe-bottom: env(safe-area-inset-bottom, 0px); }

  /* Overlay & Box safe-area-freundlich, ohne extra „Loch“ */
  .modal-overlay{
    padding-bottom: max(16px, var(--safe-bottom)) !important;
  }
  .modal-box{
    padding-bottom: 0 !important;  /* kein globaler Spalt */
  }

  /* Galerie: gerade so viel Platz, dass nichts unter die Sticky-Bar rutscht */
  .modal-box .alias-gallery{
    /* zweizeilige Sticky-Bar einkalkulieren */
    padding-bottom: calc(60px + var(--safe-bottom)) !important;
  }

  /* Sticky-Aktionsleiste: wirklich oben drüber & kompakt */
  .modal-box .sticky-actions{
    position: sticky !important;
    bottom: calc(var(--safe-bottom) + 10px) !important;   /* hebt sie über die Taskleiste */
    background: #16171a !important;
    border-top: 1px solid #2a2d31 !important;

    /* kompakter, inkl. Safe-Area-Polster unten */
    padding: 6px 0 calc(6px + var(--safe-bottom)) 0 !important;
    margin-top: 6px !important;

    /* 2-zeilig: Button oben rechts, Tipp darunter */
    flex-direction: column-reverse !important;
    align-items: stretch !important;
    gap: 4px !important;
  }
  .modal-box .sticky-actions .actions{
    display: flex !important;
    justify-content: flex-end !important; /* Button rechts */
  }
  .modal-box .sticky-actions .note{
    text-align: left !important;
    max-width: 100% !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }
}
/* === Mobile-only fix: Sticky-Bar ohne Extra-Spalt ===================== */
@media (max-width: 520px){
  :root { --safe-bottom: env(safe-area-inset-bottom, 0px); }

  /* Box bleibt der Scroll-Container */
  #createModal .modal-box { position: relative; }

  /* Sticky-Leiste: knapp über der Systemleiste, KEIN zusätzliches Bottom-Padding */
  #createModal .modal-box .sticky-actions{
    position: sticky;
    bottom: calc(var(--safe-bottom) + 6px); /* sitzt sichtbar über der Taskleiste */
    padding: 6px 0;                         /* <- kein safe-bottom mehr hier */
    margin-top: 6px;
    background: #16171a;
    border-top: 1px solid #2a2d31;
    z-index: 3;

    /* 2-zeilig: Button oben rechts, Tipp darunter */
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 4px;
  }
  #createModal .modal-box .sticky-actions .actions{
    display: flex; justify-content: flex-end;
  }
  #createModal .modal-box .sticky-actions .note{
    text-align: left; max-width: 100%;
    font-size: 11.5px; line-height: 1.35;
    padding-bottom: 0.9rem;
  }

  /* Galerie: nur wenn vorhanden – genug Platz, aber kein „Loch“ */
  #createModal .modal-box .alias-gallery{
    padding-bottom: 56px; /* Reserve für die Sticky-Bar; ohne Galerie keine Wirkung */
  }
}


/****************************************************************************
//***************           iOS fix added       *****************************
//***************************************************************************

/* added */
/* --- general flattening for rules that were nested --- */
#sidebar > ul > li:first-child .logo { font-weight: 600; }
#sidebar ul li.active a svg { fill: var(--accent-clr); }

/* Toggle rotation: use transform instead of rotate property */
#toggle-btn svg { transition: transform 150ms ease; }
.rotate svg:last-child { transform: rotate(180deg); }

/* --- Mobile layout (no nesting) --- */
@media (max-width: 800px) {
  body { grid-template-columns: 1fr; }
  main { padding: 2em 1em 60px 1em; }
  .container { border: none; padding: 0; }

  #sidebar {
    height: 60px;
    width: 100%;
    border-right: none;
    border-top: 1px solid var(--line-clr);
    padding: 0;
    position: fixed;
    top: auto;
    bottom: 0;
  }

  /* was: #sidebar { > ul { ... } } */
  #sidebar > ul {
    padding: 0;
    display: grid;
    grid-auto-columns: 60px;
    grid-auto-flow: column;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #sidebar ul li { height: 100%; }

  #sidebar ul a,
  #sidebar ul .dropdown-btn {
    width: 60px;
    height: 60px;
    padding: 0;
    border-radius: 0;
    justify-content: center;
  }
  /***************************************************************
  /* THIS is the rule that hides the logo+toggle item on mobile 
  /**************************************************************/
  /* 1) Nur das erste (Logo/Toggle) Top-Level-Item verbergen */
  #sidebar > ul > li:first-child {
    display: none;
  }

  /* 2) Nur die Label-Spans der TOP-LEVEL Links/Toggler ausblenden
        (Icons bleiben, Text der Sub-Links bleibt sichtbar) */
  #sidebar > ul > li > a > span,
  #sidebar > ul > li > .dropdown-btn > span {
    display: none;
  }

  /* 3) Sub-Menü-Badges explizit zeigen (überschreibt 2) nicht, hilft falls anderes CSS greift) */
  #sidebar .sub-menu a .badge {
    display: inline-block !important;
    margin-left: .35rem;
    top: -.1em;
  }

  /* was nested: #sidebar { ul li .sub-menu.show { ... } } */
  #sidebar ul li .sub-menu.show {
    position: fixed;
    bottom: 60px;
    left: 0;
    box-sizing: border-box;
    height: 60px;
    width: 100%;
    background-color: var(--hover-clr);
    border-top: 1px solid var(--line-clr);
    display: flex;
    justify-content: center;
  }

  #sidebar ul li .sub-menu.show > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #sidebar ul li .sub-menu.show li { display: inline-flex; }

  #sidebar ul li .sub-menu.show a {
    box-sizing: border-box;
    padding: 1em;
    width: auto;
    justify-content: center;
  }
}

#sidebar { white-space: nowrap; }
#sidebar { z-index: 1000; }

#sidebar { z-index: 1000; }

/* Mobile / iOS-Fix */
@media (max-width: 800px) {
  /* iOS fixed-in-scroll Workaround */
  #sidebar > ul {
    -webkit-overflow-scrolling: auto; /* statt 'touch' */
  }

  /* submenu */
  #sidebar ul li .sub-menu.show {
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    height: 60px;
    background-color: var(--hover-clr);
    border-top: 1px solid var(--line-clr);
    box-sizing: border-box; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: auto; 
    z-index: 1001;
    transform: translateZ(0); /* new Compositing-Layer iOS */
      
  }
}

/* END iOS fix */

/* Kleine kreisrunde Badges wie ein ®-Superscript */
a .badge, .badge {
  position: relative;
  top: -0.2em;               /* leicht hoch wie ein Hochstellungssymbol */
  display: inline-block;
  min-width: 1.05em;
  height: 1.05em;
  line-height: 1.05em;
  padding: 0;                /* so klein wie möglich */
  margin-left: .3rem;        /* kleiner Abstand zum Wort */
  border-radius: 999px;
  text-align: center;
  font-size: 0.82em;         /* wirklich klein */
  font-weight: 600;
  color: #fff;               /* weiße Zahl */
  vertical-align: super;     /* hilft dem ®-Look zusätzlich */
  width: auto;
  padding: 0 .25em;            /* kleine Pill */
  border-radius: 999px;
}

a .badge-weak, .badge-weak { background: var(--danger); }
a .badge-stale, .badge-stale { background: #ff9800; }      /* Orange */