/* =====================================================================
   BASE.CSS – GLOBAL STYLES + DARK/LIGHT MODE + ALL COMPONENTS
   ===================================================================== */

/* ---------------------------------------------------------
   GLOBAL RESET
--------------------------------------------------------- */
html, body {
    margin:0; padding:0;
    background:var(--color-bg);
    color:var(--color-text);
    font-family:var(--font-base);
}
img { max-width:100%; display:block; }
a { color:var(--color-primary); text-decoration:none; }
a:hover { opacity:0.85; }

header { flex-shrink: 0; }

            .container{max-width:1000px;margin:auto;display:flex;flex-direction:column;height: 100vh;margin-top: 60px;}
            .small{color:#6b7280;font-size:.9rem}
            .btn{padding:8px 14px; background:#272a4a; color:#fff; border:none; border-radius:6px; cursor:pointer; text-decoration:none; display:inline-block}
.page-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    margin-top: 20px;
}

/* ===== HINWEIS INFOS BOX ===== */

 .infos-box {
        background: #fff3cd;
        padding: 15px;
        border-left: 4px solid #ffcc00;
    	border-radius: 4px;
    }

.infos-text {
    display: inline-block;
    font-size: 0.9rem;
    margin: 0px;
}




/* ===== Hauptbereich ===== */
section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
}
.logo {
  margin-top: 0px;
  margin-bottom: 0px;
}
.logo img {
  max-width: 240px;
  height: auto;
  user-select: none;
}

/* ===== Suchfeld ===== */
.search {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.search form {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 720px;
}

.search input[type="text"] {
  flex: 1;
  padding: 14px 22px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: 1.2rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}
.search input[type="text"]:focus {
  outline: none;
  border-color: #86bd24;
  box-shadow: 0 0 0 4px rgba(134,189,36,0.25);
}

/* ===== Search Button ===== */
.search .btn {
  background: #86bd24;
  color: #001018;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  font-size: 1rem;
}
.search .btn:hover {
  background: #9fdc2e;
  transform: translateY(-1px);
}

/* ===== Infotext ===== */
.info-text {
  margin-top: 32px;
  max-width: 640px;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   SCROLL TO TOP
--------------------------------------------------------- */
.to-top {
    position: fixed;
    bottom: 12px;
    right: 12px;
    padding: 8px 16px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    display: none;
    font-size: 22px;
}
.to-top.visible { display:block; }

/* ---------------------------------------------------------
   NAVBAR (GLOBAL)
--------------------------------------------------------- */

	.theme-toggle-btn {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    display: flex;
    align-items: center;
}

	
#themeIcon {
    width:24px;
    height:24px;
    color:var(--color-text);
    cursor:pointer;
    transition:color .25s ease;
}

/* Dark Mode */
.dark #themeIcon {
    color:#ffffff;
}

/* ✨ ALLE FARBSYSTEME DER NAVBAR → GLOBAL THEME VARIABLEN */

.nav-main {
	color: var(--color-text);
    position:fixed;
    top:0; left:0; right:0;
    z-index:1000;
    background:var(--card-bg);
 	border-bottom: 1px solid var(--border);
    padding:10px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
}


.darkmode-btn {
  padding:7px 12px;
  border-radius:6px;
  background:var(--card-bg);
  color:var(--color-text);
  border:1px solid var(--border);
  cursor:pointer;
}

/* Brand */
.brand {
  color:var(--color-text);
  text-decoration:none;
  font-weight:700;
  font-size:1.1rem;
  padding:8px 10px;
  border-radius:8px;
}
.brand:hover {
  background:rgba(14,165,233,.12);
}

/* Links */
.nav-links {
  display:flex;
  gap:14px;
  flex:1;
  padding:0;
  margin:0 0 0 12px;
  list-style:none;
  align-items:center;
}
.nav-links a {
  color:var(--color-text);
  text-decoration:none;
  padding:8px 10px;
  border-radius:8px;
}
.nav-links a:hover {
  background:rgba(14,165,233,.12);
}
.push-right { margin-left:auto; }

/* Userbereich */
.nav-user-area {
  display:flex;
  gap:8px;
  align-items:center;
}
.nav-user-name {
  padding:4px 8px;
  border-radius:999px;
  background:var(--card-bg);
  color:var(--color-muted);
  font-size:.9rem;
}

/* Buttons */
.nav-user-link {
  padding:8px 12px;
  display:flex;
  gap:6px;
  align-items:center;
  border-radius:999px;
  background:var(--card-bg);
  color:var(--color-text);
  border:0px solid var(--border);
  cursor:pointer;
  text-decoration:none;
}
.nav-user-link:hover {
  background:rgba(14,165,233,.08);
}

/* Dropdown */
.nav-fav-dropdown{ position:relative; }
.nav-fav-btn{ background:var(--card-bg); }
.nav-fav-menu{
  position:absolute;
  top:100%;
  right:0;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:12px;
  display:none;
  flex-direction:column;
  min-width:190px;
  box-shadow:0 8px 20px rgba(0,0,0,.2);
}
.nav-fav-menu.open{ display:flex; }
.nav-fav-item{
  padding:10px 12px;
  color:var(--color-text);
  text-decoration:none;
  border-bottom:1px solid var(--border);
}
.nav-fav-item:hover{
  background:rgba(14,165,233,.08);
}

/* Dropdown Studieren */

/* Dropdown in Navbar */
.nav-links li.dropdown {
    position: relative;
}

.dropbtn {
    background:none;
    border:none;
    color:var(--color-text);
    font:inherit;
    cursor:pointer;
    padding:10px 14px;
    display:flex;
    align-items:center;
}

.dropdown-content {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:8px;
    min-width:180px;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
    z-index:9999;
}

.dropdown-content a {
    padding:10px 14px;
    display:block;
    color:var(--color-text);
    text-decoration:none;
    white-space:nowrap;
}

.dropdown-content a:hover {
    background:var(--badge-blue-bg);
}

/* Hover für Desktop */
.nav-links li.dropdown:hover .dropdown-content {
    display:block;
}

/* Mobile: Dropdown klickbar */
.nav-links.open li.dropdown .dropdown-content {
    position:relative;
    box-shadow:none;
}


/* Mobile Toggle */
.nav-toggle{
  display:none;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:8px;
  width:44px; height:36px;
  cursor:pointer;
  align-items:center; justify-content:center;
  flex-direction:column;
}
.nav-toggle .bar{
  width:20px;
  height:2px;
  margin:2px 0;
  background:var(--color-text);
}



/* Login Modal */
.login-row {
    display: grid;
	margin: 5px 0 10px 0px;
}
.login-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1500;
}
.login-modal.open{ display:flex; }
.login-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.90);
}

.login-dialog{
  position:relative;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  max-width:420px;
  width:92vw;
  z-index:2;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.login-close{
  position:absolute;
  right:10px;
  top:10px;
  background:none;
  border:none;
  font-size:24px;
  cursor:pointer;
  color:var(--color-text);
}
.login-input{
  padding:10px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--card-bg);
  color:var(--color-text);
}
.login-btn-primary{
width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: none;
    background: var(--color-success);
    color: #fff;
    margin: 0px 0px 10px 0px;
	cursor: pointer;
}

.brand {
    font-weight:700;
    font-size:1.1rem;
    color:var(--color-text);
    display:flex;
    align-items:center;
}
.brand:hover { opacity:.8; }



.push-right { margin-left:auto; }

/* Mobile Nav Toggle */
.nav-toggle {
    display:none;
    width:44px; height:36px;
    border:1px solid var(--border);
    background:var(--card-bg);
    border-radius:8px;
    align-items:center; justify-content:center;
    flex-direction:column;
}
.nav-toggle .bar {
    width:20px; height:2px;
    background:var(--color-text);
    margin:2px 0;
}

/* ---------------------------------------------------------
   ROOT VARIABLES (LIGHT MODE)
--------------------------------------------------------- */
:root {
    --color-bg: #ffffff;
    --color-text: #0f172a;
    --color-muted: #64748b;

    --color-primary: #0ea5e9;
    --color-success: #16a34a;
    --color-danger: #dc2626;
    --color-warning: #f59e0b;
    --color-science: #8b5cf6;

    --card-bg: #ffffff;
    --border: #e2e8f0;

    --badge-blue-bg:   #e0ecff;
    --badge-green-bg:  #e7fee7;
    --badge-red-bg:    #ffe7e7;
	--badge-grey-bg:   #e5e5e5;
    --badge-yellow-bg: #fff8db;
    --badge-violet-bg: #eeeaff;

    --font-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-arabic: "Scheherazade New", "Amiri", "Noto Naskh Arabic", serif;

    --radius: 10px;
}

/* ---------------------------------------------------------
   DARK MODE
--------------------------------------------------------- */
.dark {
    --color-bg: #0d0f16;
    --color-text: #e5e7eb;
    --color-muted: #9ca3af;

    --card-bg: #1a1d27;
    --border: #2a2f3a;

    --badge-blue-bg:   #1c2b45;
    --badge-green-bg:  #1b3a2a;
    --badge-red-bg:    #401e1e;
	--badge-grey-bg:   #e5e5e5;
    --badge-yellow-bg: #3f3820;
    --badge-violet-bg: #2a1f42;
}

/* ===== Fehleranzeige ===== */
.error-box {
  padding: 12px;
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #991b1b;
  border-radius: 8px;
  margin-top: 24px;
  max-width: 600px;
}

/* ---------------------------------------------------------
   TITLES
--------------------------------------------------------- */
h1,h2,h3,h4 { margin:0 0 10px; font-weight:700; }
.small { font-size:.85rem; color:var(--color-muted); }

/* ---------------------------------------------------------
   BUTTONS
--------------------------------------------------------- */
.btn {
    background:var(--color-primary);
    color:#fff;
    padding:10px 16px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    display:inline-block;
    font-weight:600;
}
.btn:hover { opacity:.9; }

.btn-ghost {
    background:transparent;
    border:1px solid var(--border);
    color:var(--color-text);
    padding:10px 16px;
    border-radius:8px;
}

/* Circle Buttons */
.btn-round {
    background:var(--color-primary);
    color:#fff;
    padding:8px;
    border-radius:999px;
    border:none;
}

/* ---------------------------------------------------------
   HEART FAVORITES
--------------------------------------------------------- */
/* Herz (Unicode) */



.heart {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
}
.heart.outline { color: #9ca3af; }
.heart.filled  { color: #dc2626; }

/* Favoriten-Popup */
.fav-dialog {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    z-index: 2000;
}
.fav-sheet {
    background: #fff;
    width: min(520px, 92vw);
    max-height: 85vh;
    overflow: auto;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.fav-sheet h3 { margin: 0 0 10px; }

.fav-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.fav-row { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.fav-row input[type=checkbox] { margin: 0; }

.fav-new { display: flex; gap: 8px; margin-top: 8px; }
.fav-new input {
    flex: 1; padding: 8px 10px;
    border: 1px solid #ddd; border-radius: 8px;
}

.fav-note { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.fav-note textarea {
    width: 100%; min-height: 70px; padding: 8px 10px;
    border: 1px solid #ddd; border-radius: 8px;
    resize: vertical;
    font-family: system-ui, sans-serif;
    font-size: .9rem;
}
.fav-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.btn { padding: 8px 14px; border-radius: 6px; cursor: pointer; border: none; }
.btn-ghost { background: transparent; border: 1px solid #ddd; }

.fav-notizen {
    display: grid;
}

.favnotizenInput {
    height: 200px;
}


/* ---------------------------------------------------------
   FAVORITE DIALOG
--------------------------------------------------------- */
.fav-dialog {
    position:fixed; inset:0;
    display:none;
    align-items:center; justify-content:center;
    background:rgba(0,0,0,.35);
    z-index:2000;
}
.fav-dialog.open { display:flex; }

.fav-sheet {
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:12px;
    width:min(520px, 92vw);
    padding:16px;
    max-height:85vh;
}

/* ---------------------------------------------------------
   BADGES farbig für pflichten, verbote etc.
--------------------------------------------------------- */
.badge {
    display: inline-block;
    padding: 4px;
    /* border-radius: 999px; */
    font-size: .75rem;
}
.badge-blue   { background:var(--badge-blue-bg);   color:var(--color-primary); }
.badge-green  { background:var(--badge-green-bg);  color:var(--color-success); }
.badge-red    { background:var(--badge-red-bg);    color:var(--color-danger); }
.badge-grey  { background:var(--badge-grey-bg);  color:var(--color-success); }
.badge-yellow { background:var(--badge-yellow-bg); color:var(--color-warning); }
.badge-grey  { background:var(--badge-grey-bg);  color:var(--color-success); }
.badge-violet { background:var(--badge-violet-bg); color:var(--color-science); }


/* ---------------------------------------------------------
   INPUTS
--------------------------------------------------------- */
input[type=text],
input[type=password],
input[type=search],
select,
textarea {
    padding:12px 14px;
    border-radius:8px;
    border:1px solid var(--border);
    background:var(--card-bg);
    color:var(--color-text);
    font-size:1rem;
}
input:focus,
textarea:focus,
select:focus {
    outline:none;
    border-color:var(--color-primary);
    box-shadow:0 0 0 3px rgba(14,165,233,.3);
}

/* ---------------------------------------------------------
   CARDS + BLOCKS
--------------------------------------------------------- */
.card {
    background:var(--card-bg);
    border-radius:12px;
    border:1px solid var(--border);
    padding:16px;
    margin:18px 0;
    position: relative;   /* ❤️ Muss rein! */
}


/* ---------------------------------------------------------
   ARABIC TEXT
--------------------------------------------------------- */
.ar {
    font-family:var(--font-arabic);
    direction:rtl;
    text-align:center;
    font-size:1.6rem;
    line-height:2.1rem;
    margin:14px 0;
    color:var(--color-text);
}

/* ---------------------------------------------------------
   GERMAN TEXT
--------------------------------------------------------- */
.de {
    text-align:center;
    line-height:1.6rem;
    margin:6px 0 18px;
}

/* ---------------------------------------------------------
   SEARCH HIGHLIGHT
--------------------------------------------------------- */
.hl, .highlight {
    background:rgba(255,255,0,0.35);
    padding:2px;
    border-radius:3px;
}

/* ---------------------------------------------------------
   TABS (Pflichten, Erlaubt, Empfohlen, Verboten, Empfohlen, Wissenschaft)
--------------------------------------------------------- */
.tabs {
    display:flex;
    gap:8px;
    border-bottom:1px solid var(--border);
    margin-top:12px;
}
.tab {
    padding:8px 12px;
    border-radius:10px 10px 0 0;
    cursor:pointer;
    background:#f8fafc;
}
.tab.active {
    background:var(--color-primary);
    color:#fff;
}

/* Accordion Content */
.tabcontent {
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .35s ease, opacity .25s ease;
}
.tabcontent.open {
    max-height:1000px;
    opacity:1;
}

/* ---------------------------------------------------------
   WORD-BY-WORD
--------------------------------------------------------- */
.wbw { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.wbw-token { text-align:center; min-width:48px; }
.wbw-translit { font-size:.95rem; }
.wbw-gloss { font-size:.8rem; color:var(--color-muted); }
.wbw-toggle {
    padding:6px 12px;
    border-radius:6px;
    background:var(--card-bg);
    border:1px solid var(--border);
    cursor:pointer;
    margin-top:10px;
}

/* ---------------------------------------------------------
   MOBILE 
--------------------------------------------------------- */
	@media(max-width:820px) {
		
		.logo {
    margin-top: 20px;
    margin-bottom: 32px;
  }
  .logo img {
    max-width: 200px;
  }
  .search form {
    flex-direction: column;
    max-width: 90%;
  }
  .search input[type="text"] {
    width: 100%;
    font-size: 1rem;
  }
  .search .btn {
    width: 100%;
    margin-top: 12px;
  }
    .container { max-width:92%; }

    .tabs { flex-direction:column; }

    .nav-toggle { display:flex; }

    .nav-links {
        position:fixed;
        left:0; right:0;
        top:var(--nav-height, 56px);
        flex-direction:column;
        background:var(--card-bg);
        border-bottom:1px solid var(--border);
        display:none;
        max-height:70vh;
        overflow:auto;
		gap: 14px;
    flex: 1;
    padding: 0;
    margin: 0 0 0 12px;
    list-style: none;
    align-items: normal;
    }
	
    .nav-links.open { display:flex; }

    .nav-links a,
    .nav-user-link {
        width:100%;
        padding:14px 16px;
        border-radius:0;
        justify-content:flex-start;
    /*border-top:1px solid var(--border);*/
    }
		
		.tabs {
    display: block;
    gap: 8px;
    border-bottom: 1px solid var(--border);
    margin-top: 12px;
}
		
.nav-main {
    position:fixed;
    top:0; left:0; right:0;
    z-index:1000;
    background:var(--card-bg);
    border-bottom:1px solid var(--border);
    padding:10px 16px;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
	justify-content: space-between;
	flex-direction: row-reverse;
}
h1 {
	padding-bottom:10px;
	font-size: 1.4rem;
	font-weight: bold;
		}

  .quran-suren-page table,
  .quran-suren-page thead,
  .quran-suren-page tbody,
  .quran-suren-page th,
  .quran-suren-page td,
  .quran-suren-page tr {
      display: block;
      
  }

  /* Tabellenkopf ausblenden */
  .quran-suren-page thead {
      display: none;
  }

  /* Jede Zeile wird eine Card */
  .quran-suren-page tr {
      margin-bottom: 14px;
      padding: 12px;
      background: var(--card-bg, #fff);
      border: 1px solid var(--border-color, #e5e7eb);
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    }

  /* Jede Zelle bekommt ein Label */
  .quran-suren-page td {
      padding: 0px 0px 0px 0px !important;
      border: none !important;
      position: relative;
  }

  .quran-suren-page td::before {
      content: attr(data-label);
      font-size: .8rem;
      font-weight: 600;
      color: var(--muted-color, #6b7280);
      display: block;
      margin-bottom: 3px;
  }

  /* Arabic text centered & bigger */
  .quran-suren-page .arabic {
      font-size: 1.3rem;
      text-align: right;
  }

}

/* ===== Responsive ===== */
@media (max-width: 640px) {
  
}