/* physik-multimedial.de - Blueprint Design
   Hintergrund: #0c1624 | Akzent: #38bdf8 | Ergebnis: #f97316
   Font: JetBrains Mono (Monospace everywhere) */

@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-mono-regular.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-medium.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/jetbrains-mono-bold.woff2') format('woff2')}

*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:'JetBrains Mono',Consolas,'SF Mono',monospace;
  color:#c8d6e5;
  background:#0c1624;
  background-image:linear-gradient(rgba(56,189,248,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.03) 1px,transparent 1px);
  background-size:20px 20px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased
}
a{color:#38bdf8;text-decoration:none}
a:hover{text-decoration:underline}

/* Skip-Link */
.skip-link{position:absolute;top:-100%;left:0;background:#38bdf8;color:#0c1624;padding:8px 20px;z-index:100;font-weight:700;text-decoration:none}
.skip-link:focus{top:0}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #38bdf8;outline-offset:2px}

/* Header */
.header{border-bottom:1px solid rgba(56,189,248,.1);padding:0 20px;height:52px;display:flex;align-items:center;position:relative;z-index:100}
.header-inner{max-width:860px;margin:0 auto;width:100%;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:.95rem;font-weight:700;color:#38bdf8;text-decoration:none}
.logo:hover{text-decoration:none;opacity:.85}
.logo span{color:#4b6584}
.nav-links{display:flex;gap:4px}
.nav-links a{color:#4b6584;font-size:.72rem;padding:4px 8px;border-radius:4px;text-decoration:none;transition:all .15s}
.nav-links a:hover,.nav-links a.active{color:#38bdf8;background:rgba(56,189,248,.06)}

/* Burger */
.burger{display:none;background:none;border:none;cursor:pointer;padding:6px;z-index:101}
.burger span{display:block;width:22px;height:2px;background:#c8d6e5;margin:4px 0;transition:all .25s}
.burger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

@media(max-width:768px){
  .burger{display:block}
  .nav-links{display:none;position:absolute;top:52px;left:0;right:0;background:#0c1624;border-bottom:1px solid rgba(56,189,248,.1);flex-direction:column;padding:12px 20px;gap:4px;z-index:100;box-shadow:0 4px 16px rgba(0,0,0,.3)}
  .nav-links.open{display:flex}
  .nav-links a{padding:10px 8px;font-size:.82rem}
}

/* Search */
.search-box{max-width:440px;margin:0 auto 20px;position:relative}
.search-box input{width:100%;background:rgba(56,189,248,.04);border:1px solid rgba(56,189,248,.1);border-radius:6px;padding:10px 14px;font-size:.82rem;font-family:inherit;color:#c8d6e5}
.search-box input::placeholder{color:#4b6584}
.search-box input:focus{border-color:rgba(56,189,248,.3);box-shadow:0 0 12px rgba(56,189,248,.08)}

/* Hero */
.hero{padding:32px 20px 16px;max-width:860px;margin:0 auto}
.hero h1{font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:4px}
@media(min-width:600px){.hero h1{font-size:1.8rem}}
.hero p{color:#4b6584;font-size:.82rem}

/* Content */
.content-wrap{max-width:860px;margin:0 auto;padding:0 20px 48px}

/* Section Title */
.section-title{font-size:.72rem;color:#38bdf8;text-transform:uppercase;letter-spacing:.1em;margin:28px 0 12px}

/* Category Grid */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
@media(min-width:600px){.cat-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:400px){.cat-grid{grid-template-columns:1fr}}
.cat-tile{background:rgba(56,189,248,.03);border:1px solid rgba(56,189,248,.08);border-radius:6px;padding:14px;text-decoration:none;color:inherit;transition:all .15s}
.cat-tile:hover{border-color:rgba(56,189,248,.25);text-decoration:none;transform:translateY(-1px)}
.cat-tile:active{transform:translateY(0)}
.cat-tile .icon{font-size:1.3rem;margin-bottom:6px;display:block}
.cat-tile h3{font-size:.82rem;color:#fff;margin-bottom:2px}
.cat-tile p{font-size:.68rem;color:#4b6584}
.cat-tile .count{font-size:.62rem;color:#38bdf8;margin-top:4px}

/* Article Cards */
.article-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:500px){.article-grid{grid-template-columns:1fr}}
.article-card{background:rgba(56,189,248,.03);border:1px solid rgba(56,189,248,.08);border-radius:6px;padding:12px;text-decoration:none;color:inherit;transition:all .15s}
.article-card:hover{border-color:rgba(56,189,248,.2);text-decoration:none}
.article-card h3{font-size:.82rem;color:#fff;margin-bottom:2px}
.article-card p{font-size:.68rem;color:#4b6584}
.article-card .badge{font-size:.62rem;color:#f97316;margin-top:4px}

/* Sub-Page Hero */
.sub-hero{padding:24px 20px;border-bottom:1px solid rgba(56,189,248,.08);max-width:860px;margin:0 auto}
.sub-hero .kicker{font-size:.65rem;color:#38bdf8;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px}
.sub-hero h1{font-size:1.3rem;color:#fff;font-weight:700;margin-bottom:4px}
@media(min-width:600px){.sub-hero h1{font-size:1.5rem}}
.sub-hero .answer{color:#f97316;font-size:1.1rem;font-weight:700}
.breadcrumb{font-size:.68rem;color:#4b6584;margin-bottom:8px}
.breadcrumb a{color:#38bdf8;text-decoration:none}

/* Calculator Box */
.calc-box{background:rgba(56,189,248,.04);border:1px solid rgba(56,189,248,.1);border-radius:6px;padding:16px;margin:16px 0}
.calc-box label{font-size:.68rem;color:#4b6584;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:4px}
.calc-box input,.calc-box select{width:100%;background:#0c1624;border:1px solid rgba(56,189,248,.15);border-radius:4px;padding:10px;color:#fff;font-family:inherit;font-size:1rem}
.calc-box input:focus{border-color:rgba(56,189,248,.4)}
.calc-result{text-align:center;margin-top:14px;padding:12px;background:rgba(249,115,22,.06);border:1px solid rgba(249,115,22,.1);border-radius:6px}
.calc-result .val{font-size:1.8rem;font-weight:700;color:#f97316}
.calc-result small{display:block;font-size:.75rem;color:#4b6584;margin-top:2px}

/* Formula Box */
.formula{background:rgba(56,189,248,.05);border:1px solid rgba(56,189,248,.1);border-radius:6px;padding:14px;margin:16px 0;text-align:center;font-size:1.1rem;color:#c8d6e5}

/* Summary Box */
.summary-box{background:rgba(56,189,248,.04);border-left:3px solid #38bdf8;padding:12px 16px;border-radius:0 6px 6px 0;margin:16px 0;font-size:.88rem}
.summary-box strong{color:#38bdf8}

/* Info Box (Eltern/Merksatz) */
.info-box{background:rgba(249,115,22,.04);border-left:3px solid #f97316;padding:12px 16px;border-radius:0 6px 6px 0;margin:16px 0;font-size:.88rem}
.info-box strong{color:#f97316}

/* ChatGPT Prompt Box */
.prompt-box{background:rgba(56,189,248,.03);border:1px solid rgba(56,189,248,.08);border-radius:6px;padding:14px;margin:20px 0}
.prompt-box .label{font-size:.72rem;color:#38bdf8;font-weight:700;margin-bottom:8px}
.prompt-box code{display:block;background:rgba(0,0,0,.2);padding:10px;border-radius:4px;font-size:.78rem;color:#c8d6e5;line-height:1.5;white-space:pre-wrap}
.prompt-box .copy-btn{background:#38bdf8;color:#0c1624;border:none;padding:5px 14px;border-radius:4px;font-size:.7rem;font-weight:700;cursor:pointer;margin-top:8px;float:right;font-family:inherit}
.prompt-box .copy-btn:hover{opacity:.85}
.prompt-box .copy-btn:active{transform:scale(.97)}
.prompt-box .chatgpt-link{font-size:.72rem;color:#4b6584;margin-top:8px;display:block;clear:both}
.prompt-box .chatgpt-link a{color:#38bdf8}

/* Article Body */
.article-body{margin:20px 0;max-width:65ch}
.article-body p{margin-bottom:14px}
.article-body strong{color:#fff}
.article-body h2{font-size:1.2rem;font-weight:700;color:#fff;margin:28px 0 10px}
.article-body h3{font-size:1rem;font-weight:700;color:#c8d6e5;margin:20px 0 8px}
.article-body ul,.article-body ol{margin:0 0 14px 20px}
.article-body li{margin-bottom:4px}
.article-body a{color:#38bdf8}
.article-body code{background:rgba(56,189,248,.08);padding:1px 5px;border-radius:3px;font-size:.9em}

/* Table */
.table-wrap{overflow-x:auto;margin:14px 0;border-radius:6px;border:1px solid rgba(56,189,248,.08)}
table{width:100%;border-collapse:collapse;font-size:.82rem}
th{background:rgba(56,189,248,.08);color:#38bdf8;padding:8px 12px;text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em}
td{padding:8px 12px;border-top:1px solid rgba(56,189,248,.04);color:#c8d6e5}
tr:hover{background:rgba(56,189,248,.03)}

/* Spickzettel (Druckoptimiert) */
.spickzettel{columns:2;column-gap:20px;font-size:.82rem}
@media(max-width:600px){.spickzettel{columns:1}}
.spickzettel h3{break-after:avoid;color:#38bdf8;font-size:.88rem;margin:10px 0 4px}
.spickzettel .formel{background:rgba(56,189,248,.05);padding:4px 8px;border-radius:3px;margin:2px 0;display:block}
@media print{
  body{background:#fff;color:#000;background-image:none}
  .header,.footer,.search-box,.prompt-box,.skip-link{display:none}
  .spickzettel{columns:2;font-size:10pt}
  .spickzettel .formel{background:#f0f0f0;border:1px solid #ccc}
  a{color:#000;text-decoration:none}
}

/* FAQ Section */
.faq-section{background:rgba(56,189,248,.02);border:1px solid rgba(56,189,248,.06);border-radius:6px;padding:20px;margin:24px 0}
.faq-section h2{margin-top:0}
.faq-section h3{position:relative;padding-left:32px;margin-top:14px}
.faq-section h3::before{content:'Q';position:absolute;left:0;top:0;width:22px;height:22px;background:#38bdf8;color:#0c1624;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700}
.faq-section h3+p{padding-left:32px;color:#4b6584}

/* Sources */
.sources{margin:24px 0;padding:12px 16px;background:rgba(56,189,248,.02);border:1px solid rgba(56,189,248,.06);border-radius:6px}
.sources-title{font-size:.62rem;color:#4b6584;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.sources ul{list-style:none;padding:0}
.sources li{font-size:.75rem;margin-bottom:3px;padding-left:12px;position:relative;color:#4b6584}
.sources li::before{content:'>';position:absolute;left:0;color:#38bdf8}
.sources a{color:#38bdf8}

/* Related */
.related{margin:24px 0 0;padding-top:16px;border-top:1px solid rgba(56,189,248,.06)}
.related-title{font-size:.68rem;color:#38bdf8;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(max-width:500px){.related-grid{grid-template-columns:1fr}}
.related-card{background:rgba(56,189,248,.03);border:1px solid rgba(56,189,248,.06);border-radius:6px;padding:12px;text-decoration:none;color:inherit;transition:all .15s}
.related-card:hover{border-color:rgba(56,189,248,.2);text-decoration:none}
.related-card h3{font-size:.82rem;color:#fff;margin-bottom:2px}
.related-card p{font-size:.68rem;color:#4b6584}

/* Sidebar */
.sidebar-widget{margin-bottom:16px}
.sidebar-title{font-size:.65rem;color:#38bdf8;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.sidebar-list{list-style:none;padding:0}
.sidebar-list li{margin-bottom:4px}
.sidebar-list a{font-size:.78rem;color:#c8d6e5;text-decoration:none;padding:4px 0;display:block;transition:color .15s}
.sidebar-list a:hover{color:#38bdf8}
.sidebar-list .active{color:#38bdf8;font-weight:700}

/* Footer */
.footer{border-top:1px solid rgba(56,189,248,.06);padding:16px 20px;text-align:center}
.footer-inner{max-width:860px;margin:0 auto}
.footer a{color:#4b6584;font-size:.72rem;text-decoration:none;margin:0 8px}
.footer a:hover{color:#38bdf8}
.footer-copy{font-size:.65rem;color:#2d3f50;margin-top:6px}