/*
Theme Name: juidoesstuff
Author: Jui
Description: Ein persönliches Portfolio für Code, Embedded Design, 3D-Druck und Server. Graues Konsolengehäuse, vier Button-Farben und wiederverwendbare Projektlayouts.
Version: 1.0.2
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: juidoesstuff
Tags: portfolio, block-patterns, full-site-editing, custom-colors
*/
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; -webkit-font-smoothing:antialiased; }
* { box-sizing:border-box; }
a { text-underline-offset:0.22em; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,input:focus-visible { outline:3px solid #2457af; outline-offset:5px; }
::selection { background:#e5b52e; color:#24252b; }
.wp-site-blocks { padding-top:0; }
.wp-site-blocks > * { margin-block-start:0; }
.dc-mono { font-family:'Courier New',Courier,monospace; font-size:0.875rem; letter-spacing:0.035em; }
.dc-eyebrow { display:flex; align-items:center; gap:0.6rem; font-weight:700; font-size:0.8125rem; letter-spacing:0.095em; line-height:1.5; }
.dc-header { min-height:110px; padding-block:1.5rem; border-bottom:2px solid #24252b; }
.dc-brand { gap:0.8rem; }
.dc-brand .wp-block-site-title a { text-decoration:none; }
.dc-brand .wp-block-site-title { margin:0; }
.dc-cross { display:inline-block; width:25px; height:25px; background:#24252b; clip-path:polygon(33% 0,67% 0,67% 33%,100% 33%,100% 67%,67% 67%,67% 100%,33% 100%,33% 67%,0 67%,0 33%,33% 33%); flex-shrink:0; }
.dc-header .wp-block-navigation__container { gap:2rem; }
.dc-header .wp-block-navigation a { text-decoration:none; }
.dc-header .wp-block-navigation a:hover { text-decoration:underline; }
.dc-hero { padding-block:5rem 4.5rem; }
.dc-hero > .wp-block-columns { gap:3rem; margin:0; }
.dc-hero h1 { margin-top:1.8rem; margin-bottom:1.5rem; font-weight:800; font-size:clamp(2.8rem,5.7vw,4.75rem); }
.dc-accent { color:#2457af; }
.dc-intro { max-width:33rem; color:#575961; font-size:1.125rem; line-height:1.7; }
.dc-hero .wp-block-buttons { margin-top:2rem; }
.dc-led { display:inline-block; width:9px; height:9px; border-radius:50%; background:#b52c39; box-shadow:0 0 0 3px #b52c3919; flex-shrink:0; }
.wp-block-button__link { border:2px solid #24252b; box-shadow:0 4px 0 #999b97; transition:transform .15s ease,box-shadow .15s ease; }
.wp-block-button__link:hover { transform:translateY(-2px); box-shadow:0 6px 0 #999b97; color:#edede8; }
.wp-block-button__link:active { transform:translateY(2px); box-shadow:0 2px 0 #999b97; }
.dc-console { background:#bfbfbd; border:2px solid #8c8d8a; border-radius:16px 16px 60px 16px; padding:1.4rem; box-shadow:inset 3px 3px 0 #f3f3ec,inset -5px -6px 0 #a3a5a2,9px 13px 0 #b5b5b0; transform:rotate(-3deg); max-width:360px; margin:1rem auto; font-family:'Courier New',Courier,monospace; color:#3f4247; user-select:none; }
.dc-console-top { display:flex; justify-content:space-between; align-items:center; font-size:0.8rem; font-weight:700; letter-spacing:0.1em; padding:0 0.2rem 1rem; }
.dc-vent { display:inline-block; width:60px; height:15px; background:repeating-linear-gradient(90deg,#80837f 0 3px,transparent 3px 8px); transform:skewX(-12deg); }
.dc-display { display:flex; flex-direction:column; align-items:center; justify-content:space-between; min-height:190px; padding:1rem 0.7rem; background:#d1d6bd; border:13px solid #34373a; border-radius:9px 9px 24px 9px; box-shadow:inset 3px 3px 0 #929983,0 2px 0 #eee; color:#384638; }
.dc-display-label { font-size:0.68rem; font-weight:700; letter-spacing:0.16em; }
.dc-pixel-face { font-size:4rem; line-height:1.2; font-weight:700; letter-spacing:0.03em; }
.dc-pixel-face > span { display:inline-block; transform:rotate(90deg); }
.dc-display-prompt { font-size:0.82rem; font-weight:700; }
.dc-controller { display:flex; align-items:center; justify-content:space-between; gap:1rem; height:150px; padding:1rem 0.1rem; }
.dc-dpad { display:block; width:85px; height:85px; background:linear-gradient(145deg,#44474b,#25282c); clip-path:polygon(33% 0,67% 0,67% 33%,100% 33%,100% 67%,67% 67%,67% 100%,33% 100%,33% 67%,0 67%,0 33%,33% 33%); position:relative; flex-shrink:0; }
.dc-dpad:after { content:''; position:absolute; width:19px; height:19px; background:#2e3134; border:2px solid #484b50; border-radius:50%; left:33px; top:33px; }
.dc-select { width:23px; height:9px; background:#777a7c; border-radius:8px; transform:rotate(-30deg); box-shadow:0 2px 0 #56595a,0 -1px 0 #ddd; }
.dc-face-buttons { width:104px; height:104px; position:relative; flex-shrink:0; border-radius:50%; background:#b1b2b0; box-shadow:inset 1px 2px 0 #a4a6a4,1px 1px 0 #ddd; }
.dc-face-buttons i { display:flex; align-items:center; justify-content:center; position:absolute; width:34px; height:34px; border-radius:50%; font-size:0.75rem; font-style:normal; font-weight:700; color:#fff; box-shadow:inset 1px 2px 0 #ffffff50,0 4px 0 #55585b; border:1px solid #00000030; }
.dc-btn-x { top:5px; left:35px; background:#2457af; }
.dc-btn-y { left:4px; top:36px; background:#26744e; }
.dc-btn-a { right:4px; top:36px; background:#b52c39; }
.dc-face-buttons .dc-btn-b { bottom:4px; left:35px; background:#e5b52e; color:#24252b; }
.dc-console-bottom { display:flex; justify-content:space-between; gap:0.5rem; padding:0.7rem 0.8rem 0.5rem 0; border-top:1px solid #a4a6a4; font-size:0.55rem; font-weight:700; letter-spacing:0.02em; }
.dc-console-bottom b { display:inline-block; width:6px; height:6px; background:#b52c39; border-radius:50%; }
.dc-interests { padding:0 0 3rem; border-bottom:1px solid #a6a6a3; }
.dc-interests > .wp-block-columns { gap:1rem; margin:0; }
.dc-interest { position:relative; padding:1.4rem 1.15rem; background:#edede8; border:1px solid #a6a6a3; border-radius:5px; box-shadow:0 3px 0 #bdbdba; }
.dc-interest:before { content:''; position:absolute; width:11px; height:11px; border-radius:50%; top:1.7rem; right:1.2rem; background:var(--dc-category); box-shadow:0 2px 0 #24252b40; }
.dc-red { --dc-category:#b52c39; }
.dc-blue { --dc-category:#2457af; }
.dc-yellow { --dc-category:#e5b52e; }
.dc-green { --dc-category:#26744e; }
.dc-interest-number { margin:0 0 1.3rem; font-weight:700; color:#575961; }
.dc-interest h3 { font-size:1.2rem; line-height:1.25; letter-spacing:-0.03em; margin:0 0 0.8rem; }
.dc-interest p:last-child { font-size:0.9375rem; line-height:1.65; color:#575961; margin:0; }
.dc-section { padding-block:4rem; }
.dc-section h2 { font-size:clamp(2rem,3.8vw,3rem); max-width:47rem; }
.dc-section > p:not(.dc-eyebrow) { color:#575961; }
.dc-empty { border:1px dashed #8c8e88; border-radius:7px; padding:2.5rem; background:#ffffff1a; margin-top:2.5rem; }
.dc-empty h3 { font-size:1.5rem; margin-top:1rem; }
.dc-empty p:last-child { color:#575961; margin-bottom:0; }
.dc-project-grid { gap:1.5rem; padding:0; }
.dc-project-card { background:#edede8; border:1px solid #a6a6a3; border-radius:8px; padding:1.25rem; height:100%; box-shadow:0 4px 0 #bdbdba; overflow:hidden; }
.dc-project-card .wp-block-post-featured-image { margin:-1.25rem -1.25rem 1.5rem; }
.dc-project-card .wp-block-post-featured-image img { display:block; object-fit:cover; }
.dc-project-card h3 { font-size:1.55rem; line-height:1.2; margin-top:1rem; }
.dc-project-card h3 a { text-decoration:none; }
.dc-project-card .wp-block-post-excerpt { font-size:1rem; color:#575961; }
.dc-project-card .wp-block-read-more { display:inline-block; font-family:'Courier New',Courier,monospace; font-size:0.9375rem; font-weight:700; margin-top:1rem; }
.dc-project-card .wp-block-post-terms { font-size:0.8125rem; }
.dc-about { border-top:2px solid #24252b; }
.dc-about > .wp-block-columns { gap:4rem; margin-top:2rem; }
.dc-about h2 { margin-top:0; }
.dc-about .wp-block-column > p { color:#575961; }
.dc-footer { margin-top:1rem; padding-block:1.8rem 2.2rem; border-top:1px solid #a6a6a3; gap:1rem; color:#575961; }
.dc-footer p { margin:0; font-size:0.8125rem; }
.dc-colors { display:flex; gap:7px; }
.dc-colors i { width:12px; height:12px; border-radius:50%; background:#b52c39; box-shadow:0 2px 0 #0003; }
.dc-colors i:nth-child(2) { background:#2457af; }
.dc-colors i:nth-child(3) { background:#e5b52e; }
.dc-colors i:nth-child(4) { background:#26744e; }
.dc-article { padding-block:3.5rem 5rem; min-height:65vh; }
.dc-article .wp-block-post-title { font-size:clamp(2.4rem,5vw,4rem); margin-block:1.5rem 2.5rem; overflow-wrap:anywhere; }
.dc-article .wp-block-post-content h2 { margin-top:3rem; }
.dc-article .wp-block-post-content pre { background:#24252b; color:#edede8; padding:1.5rem; border-radius:6px; overflow-x:auto; font-size:0.9375rem; }
.dc-article img { max-width:100%; height:auto; border-radius:5px; }
.dc-project-facts { padding:1.5rem; border:1px solid #a6a6a3; border-left:5px solid #2457af; background:#edede8; border-radius:4px; }
.dc-project-facts p { margin-block:0.5rem; }
@media (max-width:1000px) and (min-width:782px) {
.dc-hero > .wp-block-columns { gap:1.5rem; }
.dc-console { padding:1rem; }
.dc-controller { gap:0.5rem; }
.dc-dpad { width:65px; height:65px; }
.dc-dpad:after { left:24px; top:24px; width:16px; height:16px; }
.dc-face-buttons { transform:scale(.9); margin-inline:-5px; }
.dc-display-prompt { font-size:.7rem; }
.dc-interest { padding:1.2rem .85rem; }
}
@media (max-width:781px) {
.dc-header { min-height:88px; padding-block:1.3rem; }
.dc-hero { padding-block:2.75rem 3.5rem; }
.dc-hero > .wp-block-columns { gap:2.7rem; }
.dc-hero h1 { font-size:clamp(2.6rem,8vw,4rem); }
.dc-console { width:min(100%,330px); margin-block:0.5rem 1rem; transform:rotate(-2deg); }
.dc-interests > .wp-block-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.dc-section { padding-block:3rem; }
.dc-empty { padding:1.6rem; }
.dc-about > .wp-block-columns { gap:0.5rem; }
.dc-project-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
}
@media (max-width:480px) {
.dc-brand .wp-block-site-title { font-size:1.25rem; }
.dc-eyebrow { font-size:0.75rem; letter-spacing:0.04em; }
.dc-interest { padding:1.2rem 0.9rem; }
.dc-interest h3 { font-size:1.05rem; }
.dc-interest p:last-child { font-size:0.875rem; }
.dc-project-grid { grid-template-columns:1fr!important; }
.dc-footer { align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) {
html { scroll-behavior:auto; }
*,*:before,*:after { transition:none!important; animation:none!important; }
}


.dc-header, .dc-footer { width:calc(100% - 2 * clamp(1rem, 4vw, 3rem)); max-width:1180px; margin-inline:auto; }