/* ═══════════════════════════════════════════════
   BörseConnect – Stylesheet
   Einbinden mit: <link rel="stylesheet" href="boerseconnect-style.css"/>
═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap');

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
  --gold:#C9A84C;
  --bg:#0D0F12;
  --surface:#141720;
  --surface2:#1C2030;
  --text:#F0EEE8;
  --text2:#9A9898;
  --text3:#5A5A6A;
  --border:rgba(201,168,76,0.15);
  --border2:rgba(201,168,76,0.3);
  --red:#cc2222;
}

body{
  font-family:'DM Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow:hidden;
}

/* ── LOGIN ── */
#login-screen{
  position:fixed;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bg);z-index:100;overflow-y:auto;padding:2rem 1rem;
}
.login-box{
  width:400px;padding:3rem 2.5rem;
  background:var(--surface);border:2px solid var(--red);border-radius:16px;text-align:center;
}
.login-logo{font-family:'DM Serif Display',serif;font-size:30px;color:#ffffff;letter-spacing:1px;margin-bottom:4px}
.login-sub{font-size:13px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-bottom:2.5rem}
.login-label{display:block;text-align:left;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:6px;margin-top:1.2rem}
.login-input{width:100%;padding:11px 14px;font-size:14px;font-family:'DM Sans',sans-serif;background:#ffffff;border:0.5px solid #cccccc;border-radius:8px;color:#111111;outline:none;transition:border 0.2s}
.login-input:focus{border-color:var(--red)}
.login-btn{margin-top:2rem;width:100%;padding:13px;font-size:15px;font-weight:500;background:#1a1a1a;color:#ffffff;border:none;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:opacity 0.2s,transform 0.1s}
.login-btn:hover{opacity:0.85}
.login-btn:active{transform:scale(0.98)}
.login-error{font-size:12px;color:#E24B4A;margin-top:10px;min-height:16px}
.login-hint{font-size:11px;color:var(--text3);margin-top:1.5rem}

/* ── IMPRESSUM ── */
.impressum-box{width:400px;margin-top:2rem;padding:1.5rem 2rem;background:var(--surface);border:0.5px solid var(--border);border-radius:12px;text-align:left}
.impressum-title{font-size:13px;font-weight:500;color:var(--gold);letter-spacing:1px;margin-bottom:10px;text-transform:uppercase}
.impressum-text{font-size:12px;color:var(--text2);line-height:1.8}
.impressum-hint{font-size:11px;color:var(--text3);margin-bottom:8px;font-style:italic}

/* ── DASHBOARD ── */
#dashboard{display:none;height:100vh;flex-direction:column;overflow:hidden;position:relative}

/* ── NAV ── */
nav{
  background:var(--surface);
  border-bottom:0.5px solid rgba(255,255,255,0.06);
  flex-shrink:0;position:relative;z-index:50;
}
.nav-logo{
  font-family:'DM Serif Display',serif;font-size:17px;color:#ffffff;
  margin-right:0.5rem;white-space:nowrap;cursor:pointer;flex-shrink:0;
}
.nav-logo:hover{opacity:0.82}
.nav-items{
  display:flex;flex-direction:row;flex-wrap:nowrap;
  gap:0;overflow-x:auto;scrollbar-width:none;
  flex:1;min-width:0;
  -webkit-overflow-scrolling:touch;
}
.nav-items::-webkit-scrollbar{display:none}
.nav-item{
  padding:0 12px;height:40px;
  display:flex;align-items:center;
  font-size:12px;color:var(--text2);cursor:pointer;
  border-bottom:2px solid transparent;white-space:nowrap;
  transition:color 0.15s;flex-shrink:0;
}
.nav-item:hover{color:var(--text)}
.nav-item.active{color:#ffffff;font-weight:500;border-bottom-color:#ffffff}
.nav-right{
  display:flex;flex-direction:row;flex-wrap:nowrap;
  align-items:center;gap:8px;
  margin-left:auto;flex-shrink:0;
  position:relative;
}
.nav-user{font-size:11px;color:var(--text3)}
.nav-search-btn{
  width:30px;height:30px;border-radius:8px;
  background:rgba(255,255,255,0.06);border:none;color:var(--text2);
  font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.15s,color 0.15s;flex-shrink:0;
}
.nav-search-btn:hover{background:rgba(255,255,255,0.12);color:var(--text)}
.logout-btn{
  font-size:12px;padding:5px 12px;
  border:0.5px solid rgba(255,255,255,0.12);border-radius:6px;
  background:transparent;color:var(--text2);cursor:pointer;
  font-family:'DM Sans',sans-serif;transition:color 0.15s;
  white-space:nowrap;flex-shrink:0;
}
.logout-btn:hover{color:#ffffff}



/* ── iOS ZOOM OVERLAY ── */
#ios-overlay{position:fixed;inset:0;z-index:400;pointer-events:none;overflow:hidden;background:transparent}
.ios-card{position:absolute;background:#ffffff;border-radius:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 40px rgba(0,0,0,0.5);will-change:transform,border-radius,opacity}
.ios-card-label{font-family:'DM Serif Display',serif;font-size:20px;color:#111111;font-weight:600;text-align:center;padding:0 12px;line-height:1.2}

/* ── SEARCH OVERLAY ── */
.search-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:300;display:none;align-items:flex-start;justify-content:center;padding-top:80px}
.search-overlay.open{display:flex}
.search-box{background:var(--surface);border:0.5px solid rgba(255,255,255,0.12);border-radius:16px;width:560px;max-width:90vw;overflow:hidden;animation:searchGrow 0.22s cubic-bezier(0.22,1,0.36,1);transform-origin:top center}
@keyframes searchGrow{from{transform:scaleY(0.3) scaleX(0.85);opacity:0}to{transform:scaleY(1) scaleX(1);opacity:1}}
.search-input-row{display:flex;align-items:center;padding:14px 16px;gap:10px;border-bottom:0.5px solid rgba(255,255,255,0.06)}
.search-icon{font-size:16px;color:var(--text3);flex-shrink:0}
.search-input{flex:1;background:none;border:none;outline:none;font-size:15px;font-family:'DM Sans',sans-serif;color:var(--text)}
.search-input::placeholder{color:var(--text3)}
.search-close-btn{background:none;border:none;color:var(--text3);font-size:18px;cursor:pointer;padding:2px 4px}
.search-results{max-height:360px;overflow-y:auto;padding:8px 0}
.search-result-item{padding:10px 16px;cursor:pointer;display:flex;gap:10px;align-items:flex-start;transition:background 0.1s}
.search-result-item:hover{background:var(--surface2)}
.search-result-tag{font-size:10px;padding:2px 7px;border-radius:6px;background:rgba(255,255,255,0.07);color:var(--text3);white-space:nowrap;margin-top:2px;flex-shrink:0}
.search-result-title{font-size:13px;color:var(--text);line-height:1.4}
.search-result-topic{font-size:11px;color:var(--text3);margin-top:2px}
.search-empty{padding:2rem;text-align:center;font-size:13px;color:var(--text3)}

/* ── MAIN ── */
.main{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.hero{padding:2rem 2.5rem 1.5rem;border-bottom:0.5px solid rgba(255,255,255,0.05);flex-shrink:0}
.hero-greeting{font-size:12px;color:var(--text3);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px}
.hero-title{font-family:'DM Serif Display',serif;font-size:28px;color:var(--text);margin-bottom:6px}
.hero-sub{font-size:14px;color:var(--text2)}
.badge-free{display:inline-flex;align-items:center;gap:6px;background:rgba(201,168,76,0.12);border:0.5px solid rgba(201,168,76,0.25);border-radius:20px;padding:4px 14px;font-size:12px;color:var(--gold);margin-top:12px}

/* ── TOPIC AREA ── */
.topic-area{padding:2rem 2.5rem;flex:1;animation:fadeSlideIn 0.3s ease both}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

/* ── KARTEN (Unterthemen & Inhalte) ── */
.subtopics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:2rem}
.subtopic-card{background:var(--subtopic-bg,#1C2030);border:0.5px solid rgba(255,255,255,0.07);border-radius:14px;padding:1.2rem 1.2rem 2.2rem;cursor:pointer;transition:box-shadow 0.2s,transform 0.15s;position:relative;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,0.22)}
.subtopic-card:hover{box-shadow:0 5px 20px rgba(0,0,0,0.32);transform:translateY(-2px)}
.subtopic-title{font-size:14px;font-weight:500;color:var(--subtopic-text,#F0EEE8);line-height:1.4}
.subtopic-arrow{position:absolute;right:12px;bottom:12px;font-size:15px;color:var(--text3,#5A5A6A)}

.section-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-bottom:12px}
.content-list{display:flex;flex-direction:column;gap:8px}
.content-item{display:flex;align-items:center;gap:14px;padding:14px;background:var(--content-item-bg,#1C2030);color:var(--content-item-text,#F0EEE8);border:0.5px solid rgba(255,255,255,0.07);border-radius:14px;cursor:pointer;transition:box-shadow 0.2s,transform 0.15s,background 0.1s;box-shadow:0 2px 10px rgba(0,0,0,0.22);-webkit-tap-highlight-color:transparent;user-select:none}
.content-item:hover{box-shadow:0 5px 20px rgba(0,0,0,0.32);transform:translateY(-1px)}
.content-item:active{background:var(--content-item-bg,#1C2030);opacity:0.85;transform:scale(0.99)}
.content-type{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.type-video{background:rgba(201,168,76,0.15);color:#b8842a}
.type-article{background:rgba(55,138,221,0.15);color:#3a7abf}
.type-pdf{background:rgba(226,75,74,0.15);color:#c0403f}
.content-info{flex:1;min-width:0}
.content-title{font-size:13px;font-weight:500;color:var(--content-item-text,#F0EEE8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.content-meta{font-size:11px;color:var(--text2,#9A9898);margin-top:3px}
.content-new{font-size:10px;padding:2px 9px;background:rgba(201,168,76,0.15);color:#8B6914;border-radius:10px;border:0.5px solid rgba(201,168,76,0.4);flex-shrink:0}

/* ── MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:200;display:none;align-items:center;justify-content:center;padding:1.5rem}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:0.5px solid rgba(255,255,255,0.1);border-radius:16px;padding:2rem 2.2rem;max-width:540px;width:100%;position:relative;max-height:80vh;overflow-y:auto}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--text2);font-size:22px;cursor:pointer;line-height:1;padding:4px}
.modal-close:hover{color:var(--text)}
.modal-cat{font-size:10px;color:var(--text3);letter-spacing:2px;text-transform:uppercase;margin-bottom:8px}
.modal-title{font-family:'DM Serif Display',serif;font-size:22px;margin-bottom:1rem;line-height:1.3}
.modal-body{font-size:14px;color:var(--text2);line-height:1.8}
.modal-body p{margin-bottom:12px}
.modal-note{margin-top:1.5rem;padding:1rem;background:var(--surface2);border-radius:8px;border:0.5px solid rgba(255,255,255,0.06);font-size:12px;color:var(--text3)}

/* ── DISCLAIMER ── */
.disclaimer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:600;display:none;align-items:center;justify-content:center;padding:1.5rem}
.disclaimer-overlay.open{display:flex}
.disclaimer-box{background:var(--surface);border:0.5px solid rgba(255,255,255,0.1);border-radius:18px;padding:2.5rem 2.5rem 2rem;max-width:520px;width:100%}
.disclaimer-icon{font-size:32px;margin-bottom:1rem}
.disclaimer-title{font-family:'DM Serif Display',serif;font-size:22px;color:var(--text);margin-bottom:1.2rem}
.disclaimer-text{font-size:13px;color:var(--text2);line-height:1.8;margin-bottom:1.5rem}
.disclaimer-text p{margin-bottom:10px}
.disclaimer-accept-btn{width:100%;padding:14px;font-size:15px;font-weight:500;background:#ffffff;color:#0D0F12;border:none;border-radius:10px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:opacity 0.2s}
.disclaimer-accept-btn:hover{opacity:0.88}

/* ── KÜNDIGEN & KONTAKT INPUTS ── */
#kuend-name:focus,#kuend-email:focus,#kuend-grund:focus,
#kontakt-name:focus,#kontakt-email:focus,#kontakt-betreff:focus,#kontakt-nachricht:focus{
  border-color:rgba(255,255,255,0.3) !important;
}



.sub-accordion{background:var(--subtopic-bg,#1C2030);border:0.5px solid rgba(255,255,255,0.07);border-radius:12px;margin-bottom:8px;overflow:hidden}
.sub-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;cursor:pointer;transition:filter 0.15s}
.sub-header:hover{filter:brightness(1.08)}
.sub-header-title{font-size:13px;font-weight:500;color:var(--subtopic-text,#F0EEE8)}
.sub-chevron{font-size:10px;color:var(--text3,#5A5A6A);transition:transform 0.2s}
.sub-accordion.open .sub-chevron{transform:rotate(180deg)}
.sub-body{max-height:0;overflow:hidden;transition:max-height 0.25s ease}
.sub-accordion.open .sub-body{max-height:500px}
.sub-body-inner{padding:0 16px 14px;font-size:13px;color:var(--text2,#9A9898);line-height:1.7;border-top:0.5px solid rgba(255,255,255,0.06)}

@media(max-width:600px){
  .nav-item{padding:0 8px;height:34px;font-size:11px;}
  .nav-logo{font-size:15px;}
}

/* ═══════════════════════════════════════
   THEMEN-LAYOUTS (15 Varianten)
   Wird über data-layout am #main-area gesetzt
═══════════════════════════════════════ */

/* Layout 1: Standard (Karten) — Default, keine Änderung nötig */

/* Layout 2: Kompakt — schmale Zeilen */
[data-layout="kompakt"] .content-item{padding:8px 12px;border-radius:8px;gap:10px}
[data-layout="kompakt"] .content-type{width:28px;height:28px;font-size:13px}
[data-layout="kompakt"] .content-title{font-size:12px}

/* Layout 3: Groß — große Karten mit viel Platz */
[data-layout="gross"] .content-item{padding:22px;border-radius:18px;gap:18px}
[data-layout="gross"] .content-type{width:48px;height:48px;font-size:20px}
[data-layout="gross"] .content-title{font-size:16px}

/* Layout 4: Magazin — 2 Spalten Grid */
[data-layout="magazin"] .topic-area > div:last-child,
[data-layout="magazin"] [style*="flex-direction:column"]{display:grid !important;grid-template-columns:1fr 1fr;gap:12px}

/* Layout 5: Liste — minimalistisch ohne Karten */
[data-layout="liste"] .content-item{background:transparent;border:none;border-bottom:0.5px solid rgba(255,255,255,0.08);border-radius:0;box-shadow:none;padding:14px 4px}
[data-layout="liste"] .content-item:hover{transform:none;background:rgba(255,255,255,0.03)}

/* Layout 6: Karten mit Schatten (elevated) */
[data-layout="elevated"] .content-item{box-shadow:0 8px 30px rgba(0,0,0,0.4);border:none;background:var(--content-item-bg,#1C2030)}
[data-layout="elevated"] .content-item:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,0,0,0.5)}

/* Layout 7: Gradient — farbverlauf Karten */
[data-layout="gradient"] .content-item{background:linear-gradient(135deg, var(--content-item-bg,#1C2030), rgba(201,168,76,0.12));border:0.5px solid rgba(201,168,76,0.2)}

/* Layout 8: Outline — nur Rahmen */
[data-layout="outline"] .content-item{background:transparent;border:1.5px solid var(--gold,#C9A84C);box-shadow:none}
[data-layout="outline"] .content-item:hover{background:rgba(201,168,76,0.06)}

/* Layout 9: Links-Akzent — farbiger Streifen links */
[data-layout="accent"] .content-item{border-left:4px solid var(--gold,#C9A84C);border-radius:0 12px 12px 0}

/* Layout 10: Zentriert — Inhalt mittig */
[data-layout="zentriert"] .content-item{flex-direction:column;text-align:center;padding:20px}
[data-layout="zentriert"] .content-type{margin:0 auto 8px}
[data-layout="zentriert"] .content-info{text-align:center}

/* Layout 11: Glas (Glassmorphism) */
[data-layout="glas"] .content-item{background:rgba(255,255,255,0.06);backdrop-filter:blur(12px);border:0.5px solid rgba(255,255,255,0.15)}

/* Layout 12: Neon — leuchtende Akzente */
[data-layout="neon"] .content-item{background:#0a0a14;border:1px solid rgba(99,179,237,0.4);box-shadow:0 0 16px rgba(99,179,237,0.15)}
[data-layout="neon"] .content-item:hover{box-shadow:0 0 24px rgba(99,179,237,0.35)}
[data-layout="neon"] .content-title{color:#63b3ed}

/* Layout 13: Zeitung — serifenschrift, klassisch */
[data-layout="zeitung"] .content-item{background:#f5f0e6;border:0.5px solid #d4cbb8;color:#1a1a1a}
[data-layout="zeitung"] .content-title{font-family:'DM Serif Display',Georgia,serif;color:#1a1a1a;font-size:15px}
[data-layout="zeitung"] .content-meta{color:#6b5d45}

/* Layout 14: Pastell — sanfte Farben */
[data-layout="pastell"] .content-item{background:rgba(201,168,76,0.08);border:0.5px solid rgba(201,168,76,0.18);border-radius:20px}

/* Layout 15: Dunkel-Edel — sehr dunkel mit gold */
[data-layout="edel"] .content-item{background:#0d0d12;border:0.5px solid rgba(201,168,76,0.3);border-radius:6px}
[data-layout="edel"] .content-title{color:#C9A84C;letter-spacing:0.3px}

/* ── UNTERTHEMEN-LAYOUTS ── */
[data-sublayout="boxed"] .sub-accordion{background:var(--subtopic-bg,#1C2030);border:1px solid rgba(201,168,76,0.25);border-radius:14px}
[data-sublayout="minimal"] .sub-accordion{background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,0.1);border-radius:0}
[data-sublayout="gold"] .sub-header-title{color:var(--gold,#C9A84C);font-weight:600;text-transform:uppercase;letter-spacing:1px;font-size:12px}
[data-sublayout="big"] .sub-header{padding:20px}
[data-sublayout="big"] .sub-header-title{font-size:16px;font-weight:600}

/* ── DRAG & DROP ── */
.content-item.dragging{opacity:0.4;transform:scale(0.98)}
.content-item.drag-over{border-top:3px solid var(--gold,#C9A84C) !important}
.ie-drag-handle{cursor:grab;color:#5A5A6A;font-size:16px;padding:0 4px;flex-shrink:0;user-select:none}
.ie-drag-handle:active{cursor:grabbing}