/*
Theme Name:   Leitstand
Theme URI:    https://stefanpunkt.it
Author:       Stefan Dörr
Author URI:   https://stefanpunkt.it
Description:  Dashboard-inspiriertes IT-Support- und Homelab-Theme. Dunkles Leitstand-Design mit Live-Statusleiste, Betriebslog und Ticket-Übersicht. Zwei Content-Säulen: IT-Support und Homelab-Dokumentation.
Version:      1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  leitstand
*/

/* ==========================================================================
   1. Custom Properties (Design Tokens)
   ========================================================================== */
:root{
  --bg:#0B1220;
  --panel:#101A2E;
  --panel-2:#0D1626;
  --line:#243452;
  --text:#E7ECF5;
  --muted:#8A9AC0;
  --cyan:#35D1C1;
  --amber:#F5A623;
  --red:#F2545B;

  --font-display:'Poppins','Segoe UI',sans-serif;
  --font-body:'Carlito','Segoe UI',Arial,sans-serif;
  --font-mono:'JetBrains Mono','Consolas',monospace;

  --maxw:1320px;
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:700; margin:0;}
p{margin:0;}
.mono{font-family:var(--font-mono); letter-spacing:.03em;}

.container{max-width:var(--maxw); margin:0 auto; padding:0 48px;}
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.skip-link{
  position:absolute; top:-100px; left:16px; background:var(--cyan); color:#06231F;
  padding:10px 18px; z-index:1000; border-radius:4px; font-weight:700; text-decoration:none;
}
.skip-link:focus{top:16px;}

/* Focus visibility (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px;
}

/* ==========================================================================
   3. Status Strip (signature element)
   ========================================================================== */
.statusstrip{
  background:var(--panel-2);
  border-bottom:1px solid var(--line);
}
.statusstrip .container{
  display:flex; gap:28px; padding:9px 48px; font-size:12px; overflow-x:auto;
}
.statusstrip .item{display:flex; align-items:center; gap:8px; white-space:nowrap; color:var(--muted);}
.statusstrip .dot{width:7px; height:7px; border-radius:50%; flex:none;}
.statusstrip .dot.ok{background:var(--cyan); box-shadow:0 0 8px var(--cyan);}
.statusstrip .dot.warn{background:var(--amber); box-shadow:0 0 8px var(--amber);}
.statusstrip .dot.down{background:var(--red); box-shadow:0 0 8px var(--red);}

/* ==========================================================================
   4. Site Header / Navigation
   ========================================================================== */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 48px; border-bottom:1px solid var(--line);
}
.site-branding{display:flex; align-items:baseline; gap:2px;}
.site-title{font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:.02em; text-decoration:none; color:var(--text);}
.site-title span{color:var(--cyan);}
.site-description{display:none;}

.nav-wrap{display:flex; align-items:center; gap:40px;}
.primary-menu{display:flex; gap:36px;}
.primary-menu a{text-decoration:none; font-size:14px; font-weight:600; color:var(--text);}
.primary-menu li.current-menu-item > a,
.primary-menu a:hover{color:var(--cyan);}

.header-cta{
  background:var(--cyan); color:#06231F; font-weight:700; font-size:13px;
  padding:11px 20px; border-radius:4px; text-decoration:none; font-family:var(--font-mono);
  white-space:nowrap;
}

.menu-toggle{
  display:none; flex-direction:column; gap:5px; width:26px; background:none; border:none; cursor:pointer; padding:6px;
}
.menu-toggle span{height:2px; background:var(--text); display:block;}

/* ==========================================================================
   5. Hero (front page)
   ========================================================================== */
.hero{
  padding:90px 48px 70px; position:relative; border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 85% 20%, rgba(53,209,193,.10), transparent 45%),
    radial-gradient(circle at 15% 80%, rgba(245,166,35,.06), transparent 40%);
}
.hero-inner{max-width:var(--maxw); margin:0 auto;}
.eyebrow{
  font-family:var(--font-mono); font-size:12px; color:var(--amber);
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
}
.eyebrow::before{content:"//"; color:var(--muted);}
.hero h1{font-size:56px; line-height:1.08; max-width:820px; letter-spacing:-.01em;}
.hero h1 em{font-style:normal; color:var(--cyan);}
.hero .lead{max-width:560px; color:var(--muted); font-size:18px; margin-top:24px;}
.hero-buttons{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
.btn{display:inline-block; text-decoration:none; font-weight:700; font-size:15px; padding:15px 26px; border-radius:4px;}
.btn-primary{background:var(--cyan); color:#06231F;}
.btn-ghost{border:1px solid var(--line); color:var(--text);}

/* Uptime panel grid */
.panelgrid{
  margin-top:60px; display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.panelgrid .panel{background:var(--panel); padding:22px 24px;}
.panelgrid .k{font-family:var(--font-mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em;}
.panelgrid .v{font-family:var(--font-display); font-size:30px; font-weight:700; margin-top:8px;}
.panelgrid .v.cyan{color:var(--cyan);}
.panelgrid .v.amber{color:var(--amber);}

/* ==========================================================================
   6. Sections (generic content sections)
   ========================================================================== */
.section{padding:80px 48px; border-bottom:1px solid var(--line);}
.section-inner{max-width:var(--maxw); margin:0 auto;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:24px; flex-wrap:wrap;}
.section-head h2{font-size:32px;}
.section-head p{color:var(--muted); max-width:420px; font-size:15px;}

/* Service / topic grid */
.service-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;
}
.service-card{background:var(--panel); padding:32px 28px;}
.service-card .tag{font-family:var(--font-mono); font-size:11px; color:var(--cyan); margin-bottom:16px;}
.service-card h3{font-size:19px; margin-bottom:12px;}
.service-card p{color:var(--muted); font-size:14.5px;}

/* Two-column split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}

/* Log stream ("Betriebslog") */
.logstream{
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:26px;
  font-family:var(--font-mono); font-size:13px; color:var(--muted);
}
.logstream .line{display:flex; gap:14px; padding:7px 0; border-bottom:1px solid var(--line);}
.logstream .line:last-child{border-bottom:none;}
.logstream .time{color:#5A6B90;}
.logstream .ok{color:var(--cyan);}
.logstream .warn{color:var(--amber);}

/* Ticket / post list */
.ticketlist{display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.ticket{background:var(--panel); padding:20px 24px; display:flex; justify-content:space-between; align-items:center; gap:16px; text-decoration:none; color:var(--text);}
.ticket .id{font-family:var(--font-mono); color:var(--muted); font-size:12px; width:70px; flex:none;}
.ticket .t{flex:1; font-size:15px;}
.ticket .status{font-family:var(--font-mono); font-size:11px; padding:5px 10px; border-radius:3px; white-space:nowrap;}
.ticket .status.done{background:rgba(53,209,193,.12); color:var(--cyan);}
.ticket .status.progress{background:rgba(245,166,35,.12); color:var(--amber);}

/* ==========================================================================
   7. Blog / Archive / Single
   ========================================================================== */
.content-area{max-width:var(--maxw); margin:0 auto; padding:70px 48px;}
.page-title{font-size:38px; margin-bottom:44px;}

.post-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;}
.post-card{background:var(--panel); padding:28px; text-decoration:none; color:var(--text); display:flex; flex-direction:column; gap:14px;}
.post-card .cat{font-family:var(--font-mono); font-size:11px; color:var(--cyan);}
.post-card h2,.post-card h3{font-size:19px; line-height:1.3;}
.post-card .excerpt{color:var(--muted); font-size:14px;}
.post-card .meta{font-family:var(--font-mono); font-size:11px; color:#5A6B90; margin-top:auto;}

.post-article{max-width:var(--maxw); margin:0 auto; padding:70px 48px;}
.post-article .eyebrow{margin-bottom:18px;}
.post-article h1{font-size:42px; line-height:1.15; margin-bottom:20px;}
.post-article .post-meta{font-family:var(--font-mono); font-size:12px; color:var(--muted); margin-bottom:40px;}
.post-article .entry-content{font-size:17px; color:#D3DAEA;}
.post-article .entry-content h2{font-size:26px; margin:44px 0 18px; color:var(--text);}
.post-article .entry-content h3{font-size:20px; margin:34px 0 14px; color:var(--text);}
.post-article .entry-content p{margin-bottom:20px;}
.post-article .entry-content pre{
  background:var(--panel-2); border:1px solid var(--line); border-radius:8px; padding:20px;
  overflow-x:auto; font-family:var(--font-mono); font-size:13.5px; color:var(--cyan);
}
.post-article .entry-content code{font-family:var(--font-mono); background:var(--panel-2); padding:2px 6px; border-radius:3px; font-size:.9em;}
.post-article .entry-content blockquote{
  border-left:3px solid var(--cyan); margin:28px 0; padding:4px 0 4px 22px; color:var(--muted); font-style:italic;
}
.post-article .entry-content a{color:var(--cyan);}
.post-article .entry-content ul, .post-article .entry-content ol{margin:0 0 20px 22px;}
.post-article .entry-content img{border-radius:8px; margin:20px 0;}

.pagination{display:flex; justify-content:center; gap:14px; margin-top:56px;}
.pagination a, .pagination span{
  border:1px solid var(--line); padding:10px 18px; border-radius:4px; text-decoration:none;
  font-family:var(--font-mono); font-size:13px; color:var(--text);
}
.pagination .current{background:var(--cyan); color:#06231F; border-color:var(--cyan);}

/* Comments */
.comments-area{margin-top:60px; border-top:1px solid var(--line); padding-top:40px;}
.comment-list{list-style:none; margin:0 0 30px;}
.comment-body{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:20px; margin-bottom:16px;}
.comment-meta{font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-bottom:8px;}
.comment-form input, .comment-form textarea{
  width:100%; background:var(--panel-2); border:1px solid var(--line); border-radius:4px;
  padding:12px 14px; color:var(--text); font-family:var(--font-body); margin-bottom:14px;
}
.comment-form label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px;}
.comment-form .submit{
  background:var(--cyan); color:#06231F; font-weight:700; border:none; padding:13px 24px;
  border-radius:4px; cursor:pointer; font-size:14px;
}

/* Sidebar / widgets (optional) */
.widget{background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:24px; margin-bottom:24px;}
.widget-title{font-family:var(--font-mono); font-size:12px; text-transform:uppercase; color:var(--muted); margin-bottom:16px; letter-spacing:.06em;}

/* ==========================================================================
   8. Footer
   ========================================================================== */
.site-footer{padding:50px 48px;}
.site-footer .container{
  display:flex; justify-content:space-between; color:var(--muted); font-size:13px; flex-wrap:wrap; gap:20px;
  max-width:var(--maxw); margin:0 auto; padding:0;
}
.site-footer a{color:var(--muted); text-decoration:none;}
.site-footer a:hover{color:var(--cyan);}
.footer-menu{display:flex; gap:20px;}

/* ==========================================================================
   9. Utilities
   ========================================================================== */
.alignwide{max-width:1000px; margin-left:auto; margin-right:auto;}
.alignfull{max-width:none; width:100%;}

/* ==========================================================================
   10. Responsive breakpoints
   ========================================================================== */
@media (max-width:900px){
  .container, .content-area, .post-article{padding-left:24px; padding-right:24px;}
  .site-header{padding:18px 24px;}
  .primary-menu{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    background:var(--panel); border-bottom:1px solid var(--line); padding:20px 24px; gap:20px; z-index:50;
  }
  .primary-menu.is-open{display:flex;}
  .menu-toggle{display:flex;}
  .hero{padding:56px 24px 46px;}
  .hero h1{font-size:36px;}
  .panelgrid{grid-template-columns:repeat(2,1fr);}
  .section{padding:56px 24px;}
  .service-grid, .post-grid{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr; gap:36px;}
  .statusstrip .container{padding:9px 24px;}
  .site-footer{padding:36px 24px;}
  .site-footer .container{flex-direction:column;}
  .post-article h1{font-size:32px;}
}

@media (max-width:480px){
  .hero h1{font-size:29px;}
  .panelgrid{grid-template-columns:1fr;}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}