/* ==========================================================
   main.css – Marco Hofer · marcohofer.ch
   Alle Styles für index.html, impressum.html, datenschutz.html
   ========================================================== */

        :root{--accent:#fcb02f;--accent-dark:#a66f00;--ink:#151515;--muted:#64748b;--muted2:#8792a2;--line:rgba(42,86,130,.16);--line2:rgba(42,86,130,.26);--card:rgba(255,255,255,.88);--shadow:0 28px 90px rgba(66,125,178,.18);--max:1180px;--radius:34px}
    body.dark-mode{--accent-dark:#fcb02f;--ink:#f8fafc;--muted:#a8b3c7;--muted2:#7f8da5;--line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.2);--card:rgba(15,23,42,.8);--shadow:0 28px 90px rgba(0,0,0,.36)}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(180deg,#dff3ff 0%,#f3fbff 42%,#fff 74%,#f6fbff 100%);overflow-x:hidden;transition:background .35s ease,color .35s ease}body.dark-mode{background:linear-gradient(180deg,#050915 0%,#08111f 42%,#101928 100%)}
    body:before{content:"";position:fixed;inset:0;z-index:-2;background:radial-gradient(circle at 80% 10%,rgba(252,176,47,.18),transparent 20%),radial-gradient(circle at 12% 24%,rgba(99,184,239,.42),transparent 27%),radial-gradient(circle at 52% 0%,rgba(127,196,243,.28),transparent 34%);transition:background .35s ease}body.dark-mode:before{background:radial-gradient(circle at 82% 12%,rgba(252,176,47,.16),transparent 17%),radial-gradient(circle at 14% 18%,rgba(95,157,241,.18),transparent 24%),radial-gradient(circle at 50% 100%,rgba(95,157,241,.12),transparent 36%)}body.dark-mode:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 12% 22%,rgba(255,255,255,.8) 0 1px,transparent 1.5px),radial-gradient(circle at 28% 12%,rgba(255,255,255,.7) 0 1px,transparent 1.5px),radial-gradient(circle at 42% 30%,rgba(255,255,255,.65) 0 1px,transparent 1.5px),radial-gradient(circle at 66% 16%,rgba(255,255,255,.75) 0 1px,transparent 1.5px),radial-gradient(circle at 82% 28%,rgba(255,255,255,.7) 0 1px,transparent 1.5px);background-size:360px 260px;opacity:.72;animation:stars 28s linear infinite}
    a{color:inherit}.site-header{position:fixed;inset:0 0 auto;z-index:100;background:rgba(244,251,255,.84);border-bottom:1px solid var(--line);backdrop-filter:blur(18px)}body.dark-mode .site-header{background:rgba(5,9,21,.84);box-shadow:0 18px 60px rgba(0,0,0,.22)}.nav-wrap{max-width:var(--max);margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.brand-mark{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#111;letter-spacing:0}.nav-links{display:flex;gap:20px;align-items:center;font-size:13px;color:var(--muted)}.nav-links a{text-decoration:none;font-weight:650}.nav-links a:hover{color:var(--accent-dark)}.nav-cta{display:inline-flex;align-items:center;min-height:36px;padding:0 15px;border-radius:999px;background:var(--accent);color:#111!important;font-weight:800;box-shadow:0 14px 30px rgba(252,176,47,.2)}
    .theme-toggle{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:4px 6px 4px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.62);color:var(--muted);font-size:12px;font-weight:800;cursor:pointer}body.dark-mode .theme-toggle{background:rgba(15,23,42,.8)}.theme-toggle input{position:absolute;opacity:0}.toggle-track{position:relative;width:48px;height:26px;border-radius:999px;background:rgba(159,205,240,.35);border:1px solid var(--line)}.toggle-thumb{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 8px 20px rgba(252,176,47,.25);transition:.25s}.theme-toggle input:checked+.toggle-track .toggle-thumb{transform:translateX(22px);background:#f8fafc}.mobile-menu{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.62);align-items:center;justify-content:center;gap:4px;flex-direction:column}.mobile-menu span{width:16px;height:2px;border-radius:99px;background:var(--ink)}.mobile-theme-toggle{display:none}
    section{padding:110px 28px;position:relative}.container{max-width:var(--max);margin:0 auto}.kicker,.section-kicker{margin:0 0 12px;color:var(--accent-dark);font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}.section-title{margin:0;font-size:clamp(34px,5vw,58px);line-height:1.02;letter-spacing:-.055em;font-weight:800}.section-intro{max-width:780px;margin:22px 0 0;color:var(--muted);font-size:18px;line-height:1.75}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 23px;border-radius:999px;background:var(--accent);color:#151515;text-decoration:none;border:0;font:inherit;font-size:14px;font-weight:800;box-shadow:0 14px 30px rgba(252,176,47,.22);cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(252,176,47,.32)}.btn-secondary{background:rgba(255,255,255,.64);color:var(--ink);border:1px solid var(--line2);box-shadow:none}body.dark-mode .btn-secondary{background:rgba(15,23,42,.75);color:#f8fafc}
    .cloud{position:absolute;width:190px;height:64px;border-radius:999px;background:rgba(255,255,255,.78);box-shadow:0 22px 55px rgba(66,125,178,.16);animation:floatCloud 50s linear infinite}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:86px;height:86px;left:32px;top:-42px}.cloud:after{width:112px;height:112px;right:18px;top:-64px}body.dark-mode .cloud{background:rgba(255,255,255,.08);box-shadow:0 18px 45px rgba(0,0,0,.18)}.c1{left:-200px;top:16%;opacity:.42;animation-duration:48s}.c2{left:58%;top:12%;opacity:.35;transform:scale(.72);animation-duration:58s}.c3{left:18%;bottom:10%;opacity:.28;transform:scale(.55);animation-duration:66s}
    .hero{min-height:100vh;padding-top:110px;display:grid;align-items:center;overflow:hidden}.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}.hero h1{margin:0;font-size:clamp(54px,7vw,106px);line-height:.92;letter-spacing:-.078em;font-weight:800}.hero-title{margin:26px 0 0;color:var(--muted);font-size:clamp(16px,2vw,19px);line-height:1.7}.hero-slogan{margin:36px 0 0;font-size:clamp(32px,4.4vw,58px);line-height:1.04;letter-spacing:-.055em;font-weight:760}.hero-slogan span{display:block}.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}.hero-cloud-graphic{position:relative;min-height:520px;border-radius:42px;background:radial-gradient(circle at 26% 18%,rgba(255,255,255,.95),transparent 21%),radial-gradient(circle at 72% 80%,rgba(255,255,255,.9),transparent 24%),radial-gradient(circle at 52% 8%,rgba(127,196,243,.28),transparent 28%),linear-gradient(180deg,rgba(222,243,255,.96),rgba(255,255,255,.78));border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}.hero-cloud-graphic:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.92) 0 38px,transparent 39px),radial-gradient(circle at 18% 15%,rgba(255,255,255,.78) 0 48px,transparent 49px),radial-gradient(circle at 87% 22%,rgba(255,255,255,.88) 0 42px,transparent 43px),radial-gradient(circle at 92% 19%,rgba(255,255,255,.72) 0 54px,transparent 55px),radial-gradient(circle at 8% 88%,rgba(255,255,255,.84) 0 64px,transparent 65px),radial-gradient(circle at 94% 88%,rgba(255,255,255,.86) 0 70px,transparent 71px);opacity:.9;filter:blur(1.5px);animation:cloudDrift 18s ease-in-out infinite alternate}.hero-cloud-graphic:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 0 34%,rgba(255,255,255,.5) 46%,transparent 58%);transform:translateX(-90%);animation:sweep 7s ease-in-out infinite;opacity:.52}.cloud-orbit{position:absolute;left:10%;right:10%;top:23%;bottom:19%;border:2px dashed rgba(79,140,220,.32);border-right-color:rgba(252,176,47,.55);border-bottom-color:rgba(252,176,47,.45);border-radius:50%;animation:rotate 28s linear infinite;z-index:1}.cloud-orbit-dot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px rgba(252,176,47,.5);z-index:3;animation:pulse 3s ease-in-out infinite}.cod-1{left:12%;top:42%;background:#5f9df1}.cod-2{right:15%;top:39%}.cod-3{left:50%;bottom:14%;background:#5f9df1}.cod-4{left:17%;bottom:25%;background:rgba(255,255,255,.95)}.main-cloud{position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);width:240px;height:118px;border-radius:999px;background:linear-gradient(180deg,#fff,#eaf6ff);border:1px solid rgba(74,112,150,.13);box-shadow:0 30px 78px rgba(66,125,178,.22),inset 0 -12px 30px rgba(95,157,241,.13);z-index:5;animation:cloudFloat 5.8s ease-in-out infinite}.main-cloud:before,.main-cloud:after{content:"";position:absolute;border-radius:50%;background:inherit;z-index:-1}.main-cloud:before{width:118px;height:118px;left:43px;top:-58px}.main-cloud:after{width:142px;height:142px;right:22px;top:-78px}.main-cloud-icon{position:absolute;inset:0;display:grid;place-items:center;color:#4f8cdc;font-size:42px;font-weight:800}.main-cloud-base{position:absolute;left:50%;top:61%;transform:translate(-50%,-50%);width:300px;height:86px;border-radius:50%;background:rgba(255,255,255,.56);border:1px solid rgba(74,112,150,.1);box-shadow:inset 0 0 40px rgba(95,157,241,.12),0 24px 64px rgba(84,128,168,.12);z-index:4}.cloud-node{position:absolute;z-index:6;width:110px;height:84px;border-radius:999px;background:rgba(255,255,255,.86);border:1px solid rgba(74,112,150,.17);display:grid;place-items:center;box-shadow:0 20px 52px rgba(84,128,168,.13);animation:nodeFloat 5.2s ease-in-out infinite}.cloud-node:before,.cloud-node:after{content:"";position:absolute;border-radius:50%;background:inherit;z-index:-1}.cloud-node:before{width:48px;height:48px;left:22px;top:-20px}.cloud-node:after{width:60px;height:60px;right:15px;top:-28px}.cloud-node-inner{display:grid;gap:6px;place-items:center;font-size:12px;color:#475569;font-weight:800;letter-spacing:.04em}.cloud-node-icon{font-size:24px;color:#4f8cdc}.node-dev{left:18%;top:20%}.node-sec{right:18%;top:20%;animation-delay:.8s}.node-data{left:12%;bottom:18%;animation-delay:1.4s}.node-ops{right:13%;bottom:18%;animation-delay:2s}.flow-line{position:absolute;z-index:2;height:2px;background:linear-gradient(90deg,transparent,rgba(95,157,241,.75),rgba(255,255,255,.9),transparent);transform-origin:left center;animation:lineGlow 3.8s ease-in-out infinite}.flow-warm{background:linear-gradient(90deg,transparent,rgba(252,176,47,.7),rgba(255,255,255,.9),transparent)}.flow-1{width:190px;left:31%;top:39%;transform:rotate(23deg)}.flow-2{width:190px;right:31%;top:39%;transform:rotate(-23deg)}.flow-3{width:205px;left:23%;bottom:33%;transform:rotate(-18deg)}.flow-4{width:205px;right:24%;bottom:33%;transform:rotate(18deg)}body.dark-mode .hero-cloud-graphic{background:radial-gradient(circle at 22% 18%,rgba(95,157,241,.2),transparent 22%),radial-gradient(circle at 78% 74%,rgba(252,176,47,.12),transparent 22%),linear-gradient(180deg,rgba(10,19,36,.92),rgba(16,25,40,.78));box-shadow:0 32px 90px rgba(0,0,0,.36),inset 0 0 70px rgba(95,157,241,.08)}body.dark-mode .main-cloud,body.dark-mode .cloud-node,body.dark-mode .main-cloud-base{background:linear-gradient(180deg,rgba(30,42,62,.96),rgba(15,23,42,.92));border-color:rgba(255,255,255,.12);box-shadow:0 26px 70px rgba(0,0,0,.34)}body.dark-mode .cloud-node-inner{color:#dbeafe}body.dark-mode .cloud-node-icon,body.dark-mode .main-cloud-icon{color:#93c5fd}
    .card,.profile-card,.content-card,.timeline-card,.cert-card,.project-card,.contact-card,.roadmap-aside,.roadmap-card,.skill-detail{border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);border-radius:var(--radius)}body.dark-mode .card,body.dark-mode .profile-card,body.dark-mode .content-card,body.dark-mode .timeline-card,body.dark-mode .cert-card,body.dark-mode .project-card,body.dark-mode .contact-card,body.dark-mode .roadmap-aside,body.dark-mode .roadmap-card,body.dark-mode .skill-detail{background:rgba(15,23,42,.8);box-shadow:0 24px 80px rgba(0,0,0,.26)}.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:stretch;margin-top:54px}.profile-card{padding:30px;min-height:420px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:20px}.profile-card:before,.contact-card:before,.skill-detail:before{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:rgba(127,196,243,.18)}body.dark-mode .profile-card:before,body.dark-mode .contact-card:before,body.dark-mode .skill-detail:before{background:rgba(252,176,47,.09)}.avatar-placeholder{position:relative;z-index:2;overflow:hidden;border-radius:28px;flex:1;min-height:320px;background:linear-gradient(135deg,#e7f5ff,#f0f8ff)}.avatar-placeholder img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}.profile-meta{position:relative;z-index:2}.profile-meta h3{margin:0 0 12px;font-size:28px;letter-spacing:-.04em}.profile-meta p,.content-card p{margin:0;color:var(--muted);line-height:1.75}.content-card{padding:36px}.content-card p{margin-bottom:18px;font-size:17px}.highlight{color:var(--ink);font-weight:700}
    .skills-showcase{margin-top:58px}.skill-category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.skill-category{position:relative}.skill-category input{position:absolute;opacity:0}.skill-category label{display:flex;align-items:center;justify-content:center;text-align:center;min-height:62px;padding:14px 16px;border-radius:22px;border:1px solid var(--line);background:rgba(255,255,255,.82);color:#475569;font-size:14px;font-weight:800;line-height:1.25;cursor:pointer;box-shadow:0 14px 36px rgba(84,128,168,.07);transition:.22s}body.dark-mode .skill-category label{background:rgba(15,23,42,.72);color:#a8b3c7}.skill-category label:hover{transform:translateY(-3px);border-color:rgba(252,176,47,.46)}.skill-category input:checked+label{background:linear-gradient(180deg,#fff7e8,rgba(255,255,255,.9));border-color:rgba(252,176,47,.68);color:var(--accent-dark);box-shadow:0 18px 44px rgba(252,176,47,.16)}body.dark-mode .skill-category input:checked+label{background:linear-gradient(180deg,rgba(252,176,47,.18),rgba(15,23,42,.92));color:var(--accent)}.skill-detail-area{margin-top:22px;min-height:280px}.skill-detail{display:none;padding:36px;position:relative;overflow:hidden}.skill-detail.active{display:block;animation:fade .28s ease both}.skill-detail h3{position:relative;margin:0 0 12px;font-size:clamp(28px,3.2vw,42px);letter-spacing:-.06em}.skill-detail p{position:relative;margin:0 0 28px;color:var(--muted);line-height:1.75}.skill-chip-grid{position:relative;display:flex;flex-wrap:wrap;gap:10px}.skill-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:rgba(255,255,255,.76);border:1px solid rgba(74,112,150,.14);color:#475569;font-size:14px;font-weight:760;box-shadow:0 10px 26px rgba(84,128,168,.08)}body.dark-mode .skill-chip{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.1);color:#cbd5e1}
    .experience-roadmap{margin-top:58px;display:grid;grid-template-columns:320px 1fr;gap:34px;align-items:start}.roadmap-aside{position:sticky;top:106px;padding:28px;overflow:hidden}.roadmap-aside h3{margin:0 0 12px;font-size:28px;letter-spacing:-.045em}.roadmap-aside p{margin:0 0 24px;color:var(--muted);line-height:1.7}.roadmap-facts{display:grid;gap:12px}.roadmap-fact{padding:16px;border-radius:22px;background:rgba(255,255,255,.62);border:1px solid var(--line)}body.dark-mode .roadmap-fact{background:rgba(255,255,255,.045)}.roadmap-fact strong{display:block;font-size:30px;color:var(--accent-dark);letter-spacing:-.05em}.roadmap-fact span{display:block;margin-top:8px;color:var(--muted);font-size:14px}.roadmap-track{position:relative;display:grid;gap:18px}.roadmap-track:before,.timeline-list:before{content:"";position:absolute;left:31px;top:28px;bottom:28px;width:2px;background:linear-gradient(180deg,var(--accent),rgba(95,157,241,.45),var(--accent))}.roadmap-item{position:relative;display:grid;grid-template-columns:64px 1fr;gap:18px}.roadmap-dot{position:sticky;top:132px;width:64px;height:64px;border-radius:24px;background:rgba(255,255,255,.88);border:1px solid rgba(252,176,47,.32);display:grid;place-items:center;color:var(--accent-dark);font-size:12px;font-weight:900;z-index:2;box-shadow:0 16px 36px rgba(252,176,47,.12)}body.dark-mode .roadmap-dot{background:rgba(15,23,42,.95)}.roadmap-card{padding:28px}.roadmap-card header,.timeline-card header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}.roadmap-card h3,.timeline-card h3{margin:0;font-size:26px;letter-spacing:-.045em}.company{margin:8px 0 0!important;color:var(--muted)!important;font-weight:650}.roadmap-card p,.timeline-card p{color:var(--muted);line-height:1.75;margin:0}.pill{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border-radius:999px;background:#fff7e8;border:1px solid rgba(252,176,47,.26);color:var(--accent-dark);font-size:12px;font-weight:800;white-space:nowrap}body.dark-mode .pill{background:rgba(252,176,47,.14);color:var(--accent)}.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.tag{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:rgba(159,205,240,.18);color:#486985;font-size:12px;font-weight:700;border:1px solid rgba(74,112,150,.12)}body.dark-mode .tag{background:rgba(95,157,241,.1);color:#bfdbfe;border-color:rgba(147,197,253,.16)}
    .timeline-list{position:relative;margin-top:54px}.education-item{position:relative;padding-left:58px;margin-bottom:22px}.education-item:before{content:"";position:absolute;left:8px;top:8px;width:22px;height:22px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 8px rgba(252,176,47,.16);z-index:2}.education-item .timeline-card{margin:0;padding:34px}.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:54px}.cert-card{padding:24px}.cert-card .date{display:inline-flex;margin-bottom:18px;min-height:30px;align-items:center;padding:0 11px;border-radius:999px;background:#fff7e8;color:var(--accent-dark);font-size:12px;font-weight:800}body.dark-mode .cert-card .date{background:rgba(252,176,47,.14);color:var(--accent)}.cert-card h3{margin:0 0 10px;font-size:20px;letter-spacing:-.035em}.cert-card p{margin:0;color:var(--muted);line-height:1.65;font-size:15px}
    body.dark-mode body.dark-mode body.dark-mode body.dark-mode .preview-mini-card:after{content:"";position:absolute;left:12px;right:12px;bottom:12px;height:7px;border-radius:999px;background:rgba(252,176,47,.58)}body.dark-mode body.dark-mode body.dark-mode 
    .contact-section{padding-bottom:90px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:54px;align-items:stretch}.contact-visual-animated.mail-scene{position:relative;min-height:520px;border-radius:38px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 20% 18%,rgba(127,196,243,.22),transparent 22%),radial-gradient(circle at 82% 78%,rgba(252,176,47,.12),transparent 22%),linear-gradient(180deg,rgba(223,243,255,.96),rgba(255,255,255,.86));box-shadow:0 26px 80px rgba(66,125,178,.16)}body.dark-mode .contact-visual-animated.mail-scene{background:radial-gradient(circle at 20% 18%,rgba(95,157,241,.18),transparent 22%),radial-gradient(circle at 82% 78%,rgba(252,176,47,.1),transparent 22%),linear-gradient(180deg,rgba(10,19,36,.94),rgba(16,25,40,.82));box-shadow:0 28px 80px rgba(0,0,0,.28)}.contact-sky-glow{position:absolute;inset:0;background:radial-gradient(circle at 10% 14%,rgba(255,255,255,.78) 0 52px,transparent 53px),radial-gradient(circle at 16% 11%,rgba(255,255,255,.58) 0 66px,transparent 67px),radial-gradient(circle at 90% 18%,rgba(255,255,255,.74) 0 50px,transparent 51px),radial-gradient(circle at 12% 92%,rgba(255,255,255,.58) 0 80px,transparent 81px);opacity:.92;animation:cloudDrift 14s ease-in-out infinite alternate}.scene-cloud{position:absolute;border-radius:999px;background:rgba(255,255,255,.72);box-shadow:0 16px 40px rgba(66,125,178,.12);animation:nodeFloat 9s ease-in-out infinite}.scene-cloud:before,.scene-cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.scene-cloud:before{width:42px;height:42px;left:18px;top:-18px}.scene-cloud:after{width:54px;height:54px;right:16px;top:-26px}.cloud-a{width:110px;height:44px;left:10%;top:15%}.cloud-b{width:86px;height:36px;right:14%;top:14%;animation-delay:1.3s}.cloud-c{width:94px;height:38px;left:18%;bottom:14%;animation-delay:2.1s}.mail-trail{position:absolute;height:2px;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(95,157,241,.65),rgba(252,176,47,.55),transparent);animation:trailPulse 3.2s ease-in-out infinite}.trail-1{width:150px;left:18%;top:35%;transform:rotate(14deg)}.trail-2{width:130px;left:20%;top:43%;transform:rotate(10deg);animation-delay:.6s}.trail-3{width:110px;left:25%;top:50%;transform:rotate(7deg);animation-delay:1.2s}.flying-mail{position:absolute;left:24%;top:40%;width:190px;height:130px;z-index:5;animation:envelopeFlight 4.6s ease-in-out infinite}.mail-shadow{position:absolute;left:28px;bottom:-10px;width:120px;height:24px;border-radius:50%;background:rgba(66,125,178,.14);filter:blur(4px);animation:shadowPulse 4.6s ease-in-out infinite}.envelope{position:absolute;left:42px;top:28px;width:112px;height:76px;z-index:4;transform:rotate(-10deg)}.envelope-back{position:absolute;inset:0;border-radius:12px;background:linear-gradient(180deg,#fff,#eef7ff);border:1px solid rgba(74,112,150,.16);box-shadow:0 16px 42px rgba(66,125,178,.18)}.envelope-front{position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(180deg,#f8fcff,#e6f3ff);clip-path:polygon(0 0,50% 72%,100% 0,100% 100%,0 100%);border-bottom-left-radius:12px;border-bottom-right-radius:12px}.envelope-flap{position:absolute;left:0;right:0;top:0;height:38px;background:linear-gradient(180deg,#fff,#edf7ff);clip-path:polygon(0 0,100% 0,50% 100%)}.wing{position:absolute;top:24px;width:58px;height:72px;z-index:3}.wing span{position:absolute;display:block;width:42px;height:16px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(231,243,255,.92));border:1px solid rgba(74,112,150,.08);box-shadow:0 8px 18px rgba(66,125,178,.08)}body.dark-mode .envelope-back,body.dark-mode .envelope-front,body.dark-mode .envelope-flap,body.dark-mode .wing span{background:linear-gradient(180deg,rgba(30,42,62,.96),rgba(15,23,42,.92));border-color:rgba(255,255,255,.08)}.wing-left{left:10px;transform-origin:right center;animation:wingFlapLeft 1.2s ease-in-out infinite}.wing-left span:nth-child(1){top:6px;left:4px;transform:rotate(-28deg)}.wing-left span:nth-child(2){top:24px;left:0;transform:rotate(-12deg)}.wing-left span:nth-child(3){top:42px;left:6px;transform:rotate(8deg)}.wing-right{right:8px;transform-origin:left center;animation:wingFlapRight 1.2s ease-in-out infinite}.wing-right span:nth-child(1){top:6px;right:4px;transform:rotate(28deg)}.wing-right span:nth-child(2){top:24px;right:0;transform:rotate(12deg)}.wing-right span:nth-child(3){top:42px;right:6px;transform:rotate(-8deg)}.mailbox-wrap{position:absolute;right:12%;bottom:16%;width:170px;height:210px;z-index:4;animation:mailboxFloat 5.2s ease-in-out infinite}.mailbox-post{position:absolute;left:72px;bottom:0;width:16px;height:92px;border-radius:12px;background:linear-gradient(180deg,#8b5e34,#6f4728)}.mailbox-body{position:absolute;left:26px;top:18px;width:120px;height:86px;border-radius:46px 46px 20px 20px;background:linear-gradient(180deg,#fcb02f,#df980f);border:1px solid rgba(126,81,0,.18);box-shadow:0 18px 38px rgba(252,176,47,.2)}.mailbox-door{position:absolute;left:14px;right:14px;bottom:12px;height:30px;border-radius:12px;background:rgba(255,255,255,.2)}.mailbox-slot{position:absolute;left:22px;right:28px;top:22px;height:8px;border-radius:999px;background:rgba(80,49,0,.34)}.mailbox-flag{position:absolute;right:-10px;top:18px;width:8px;height:32px;border-radius:999px;background:#7f1d1d}.mailbox-flag:after{content:"";position:absolute;top:-2px;left:6px;width:18px;height:12px;border-radius:3px;background:#ef4444}.mailbox-shadow{position:absolute;left:26px;bottom:-6px;width:120px;height:24px;border-radius:50%;background:rgba(66,125,178,.14);filter:blur(4px)}.spark{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 8px rgba(252,176,47,.08),0 0 18px rgba(252,176,47,.26);animation:pulse 3s ease-in-out infinite}.spark-1{left:42%;top:30%}.spark-2{left:52%;top:38%;animation-delay:.7s}.spark-3{left:62%;top:46%;animation-delay:1.3s}.spark-4{right:23%;top:52%;animation-delay:2s}.contact-form-card{padding:38px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.contact-form-card h3{margin:0 0 14px;font-size:32px;letter-spacing:-.045em}.contact-form-card p{margin:0 0 28px;color:var(--muted);line-height:1.75}.contact-form{display:grid;gap:18px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-field{display:grid;gap:8px}.form-field label{font-size:14px;font-weight:700}.form-field input,.form-field textarea{width:100%;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.72);padding:14px 16px;font:inherit;color:var(--ink);outline:0}body.dark-mode .form-field input,body.dark-mode .form-field textarea{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#f8fafc}.form-field input:focus,.form-field textarea:focus{border-color:rgba(252,176,47,.65);box-shadow:0 0 0 4px rgba(252,176,47,.12);background:rgba(255,255,255,.92)}.contact-form-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:4px;flex-wrap:wrap}.contact-direct-info{color:var(--muted);font-size:14px}
    .site-footer{border-top:1px solid var(--line);background:rgba(255,255,255,.68);padding:34px 28px}body.dark-mode .site-footer{background:rgba(8,17,31,.88)}.footer-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:28px;align-items:center;color:var(--muted);font-size:14px;flex-wrap:wrap}.footer-brand{color:var(--ink);font-weight:800}.footer-links{display:flex;gap:18px;flex-wrap:wrap}.footer-links a{color:var(--muted);text-decoration:none}
    @keyframes stars{to{transform:translate3d(-80px,60px,0)}}@keyframes floatCloud{to{transform:translateX(calc(100vw + 360px)) scale(var(--scale,1))}}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.25);opacity:1}}@keyframes cloudDrift{from{transform:translate3d(-8px,0,0)}to{transform:translate3d(10px,-8px,0)}}@keyframes sweep{0%,100%{transform:translateX(-100%);opacity:0}50%{opacity:.5}70%{transform:translateX(100%);opacity:0}}@keyframes cloudFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 8px))}}@keyframes nodeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes lineGlow{0%,100%{opacity:.32}50%{opacity:.9}}@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes envelopeFlight{0%,100%{transform:translate(0,0) rotate(-2deg)}25%{transform:translate(12px,-8px) rotate(2deg)}50%{transform:translate(24px,-2px) rotate(4deg)}75%{transform:translate(12px,6px) rotate(1deg)}}@keyframes wingFlapLeft{0%,100%{transform:rotate(12deg)}50%{transform:rotate(-18deg)}}@keyframes wingFlapRight{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(18deg)}}@keyframes trailPulse{0%,100%{opacity:.28}50%{opacity:1}}@keyframes mailboxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes shadowPulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.08);opacity:.55}}
    /* Mobile nav drawer */
    .mobile-nav-drawer{display:none;position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.45);backdrop-filter:blur(4px)}.mobile-nav-drawer.open{display:block}.mobile-nav-panel{position:absolute;top:0;right:0;width:min(320px,88vw);height:100%;background:rgba(244,251,255,.97);padding:80px 28px 40px;display:flex;flex-direction:column;gap:6px;box-shadow:-20px 0 60px rgba(0,0,0,.14);transform:translateX(100%);transition:transform .3s ease}.mobile-nav-drawer.open .mobile-nav-panel{transform:translateX(0)}body.dark-mode .mobile-nav-panel{background:rgba(5,9,21,.97)}.mobile-nav-panel a{display:block;padding:14px 0;font-size:18px;font-weight:700;color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}.mobile-nav-panel a:hover{color:var(--accent-dark)}.mobile-nav-panel .nav-cta{margin-top:14px;display:inline-flex;padding:0 20px;min-height:48px;align-items:center;border-radius:999px;background:var(--accent);color:#111!important;font-weight:800;border:none}.mobile-nav-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.7);display:grid;place-items:center;font-size:22px;cursor:pointer;color:var(--ink)}body.dark-mode .mobile-nav-close{background:rgba(15,23,42,.8)}
    @media(max-width:980px){
      .nav-links{display:none}
      .mobile-menu,.mobile-theme-toggle{display:flex}
      .hero .container,.about-grid,.experience-roadmap,.contact-grid{grid-template-columns:1fr}
      .hero{min-height:auto}
      .hero-cloud-graphic{min-height:360px}
      .roadmap-aside{position:static}
      .skill-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .cert-grid,
      .contact-visual-animated.mail-scene{min-height:400px}
      .mailbox-wrap{right:8%;bottom:10%;transform:scale(.9)}
      .flying-mail{left:18%;top:38%;transform:scale(.92)}
      .experience-roadmap{grid-template-columns:1fr}
    }
    @media(max-width:680px){
      section{padding:72px 18px}
      .nav-wrap{padding:13px 18px}
      .brand span:last-child{display:none}
      .hero{padding-top:90px}
      .hero h1{font-size:clamp(48px,17vw,76px)}
      .hero-title{font-size:16px}
      .hero-slogan{font-size:clamp(28px,9.5vw,42px);margin-top:24px}
      .hero-actions{margin-top:28px;gap:10px}
      .hero-cloud-graphic{min-height:300px;border-radius:28px}
      .section-title{font-size:clamp(30px,8vw,46px)}
      .section-intro{font-size:16px;margin-top:16px}
      .skill-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
      .skill-category label{min-height:54px;padding:10px 12px;font-size:13px;border-radius:18px}
      .skill-detail{padding:24px}
      .skill-detail h3{font-size:clamp(24px,7vw,34px)}
      .skill-chip{font-size:13px;min-height:36px;padding:0 13px}
      .cert-grid,.project-grid,.form-grid{grid-template-columns:1fr}
      .profile-card,.content-card,.timeline-card,.contact-card,.roadmap-card,.roadmap-aside{padding:22px}
      .roadmap-item{grid-template-columns:48px 1fr;gap:14px}
      .roadmap-dot{width:48px;height:48px;border-radius:16px;font-size:10px;position:relative;top:auto}
      .roadmap-card h3,.timeline-card h3{font-size:20px}
      .roadmap-track:before{left:23px}
      .roadmap-fact strong{font-size:24px}
      .education-item{padding-left:46px}
      .education-item:before{width:18px;height:18px;left:5px;top:24px}
      .timeline-list:before{left:13px}
      .cert-card{padding:20px}
      .cert-card h3{font-size:17px}
      
      
      
      
      
      
      .contact-visual-animated.mail-scene{min-height:300px}
      .flying-mail{left:12%;top:34%;transform:scale(.7)}
      .mailbox-wrap{right:2%;bottom:5%;transform:scale(.66)}
      .contact-form-card{padding:22px}
      .contact-form-card h3{font-size:26px}
      .contact-form-footer{flex-direction:column;align-items:stretch}
      .contact-form-footer .btn{width:100%;justify-content:center}
      .contact-direct-info{text-align:center}
      .footer-inner{align-items:flex-start;flex-direction:column;gap:18px}
      .roadmap-card header,.timeline-card header{flex-direction:column;gap:10px}
      .about-grid{gap:18px;margin-top:36px}
      .avatar-placeholder{min-height:220px;border-radius:20px}.avatar-placeholder img{object-position:center 20%}
      .profile-meta h3{font-size:22px}
    
      .skill-category-grid{display:flex;overflow-x:auto;gap:9px;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
      .skill-category-grid::-webkit-scrollbar{display:none}
      .skill-category{flex:0 0 auto}
      .skill-category label{white-space:nowrap;min-height:44px}
    }
    @media(max-width:430px){
      section{padding:60px 16px}
      .nav-wrap{padding:12px 16px}
      .hero h1{font-size:clamp(42px,15vw,66px)}
      .hero-slogan{font-size:clamp(25px,8.5vw,36px)}
      .hero-cloud-graphic{min-height:260px}
      .skill-category-grid{grid-template-columns:1fr 1fr;gap:8px}
      .skill-category label{min-height:48px;padding:8px 10px;font-size:12px}
      .roadmap-facts{grid-template-columns:1fr 1fr}
      .cert-grid{gap:12px}
      
      .btn{min-height:44px;padding:0 18px;font-size:13px}
      .section-title{letter-spacing:-.045em}
      .profile-card{min-height:auto}
      .skill-detail-area{min-height:auto}
      .hero-cloud-graphic{display:none}
    }
    .reveal{opacity:0;transform:translateY(32px);transition:opacity .6s ease,transform .6s ease}.reveal.visible{opacity:1;transform:translateY(0)}.reveal-delay-1{transition-delay:.1s}.reveal-delay-2{transition-delay:.2s}.reveal-delay-3{transition-delay:.3s}.reveal-delay-4{transition-delay:.4s}
    body.dark-mode 
    

    /* Cert logo */
    /* Active nav link */
    .nav-links a.nav-active{color:var(--accent-dark);font-weight:800;position:relative}.nav-links a.nav-active::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--accent)}
    
    /* ── Skill Bar Cards ─────────────────────────────────── */
    .skill-bar-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .skill-bar-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 22px 20px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      box-shadow: 0 10px 32px rgba(66, 125, 178, .08);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    .skill-bar-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 44px rgba(66, 125, 178, .14);
    }

    body.dark-mode .skill-bar-card {
      background: rgba(15, 23, 42, .8);
      box-shadow: 0 10px 32px rgba(0, 0, 0, .2);
    }

    .skill-bar-icon {
      font-size: 30px;
      line-height: 1;
    }

    .skill-bar-name {
      font-size: 14px;
      font-weight: 800;
      text-align: center;
      color: var(--ink);
      line-height: 1.3;
    }

    .skill-bar-track {
      width: 100%;
      height: 7px;
      border-radius: 999px;
      background: rgba(99, 184, 239, .2);
      overflow: hidden;
    }

    body.dark-mode .skill-bar-track {
      background: rgba(255, 255, 255, .1);
    }

    .skill-bar-fill {
      height: 100%;
      width: var(--pct);
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), #f59e0b);
      transition: width .8s cubic-bezier(.4, 0, .2, 1);
    }

    .skill-detail:not(.active) .skill-bar-fill {
      width: 0;
    }

    .skill-bar-pct {
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
    }

    /* Mobile: 2 columns */
    @media (max-width: 780px) {
      .skill-bar-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 480px) {
      .skill-bar-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
      .skill-bar-card { padding: 16px 12px 14px; }
      .skill-bar-icon { font-size: 24px; }
      .skill-bar-name { font-size: 12px; }
    }

    /* ── Project Cards (Screenshot Preview) ────────────── */
    .project-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-top: 54px;
    }

    .project-card {
      border: 1px solid var(--line);
      background: var(--card);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .project-card:not(.coming-soon):hover {
      transform: translateY(-4px);
      box-shadow: 0 36px 100px rgba(66, 125, 178, .22);
    }

    body.dark-mode .project-card {
      background: rgba(15, 23, 42, .8);
    }

    /* Frame wrap: holds iframe + screenshot stacked */
    .project-frame-wrap {
      position: relative;
      width: 100%;
      height: 220px;
      overflow: hidden;
      background: #f0f7ff;
    }

    body.dark-mode .project-frame-wrap {
      background: #0b1322;
    }

    /* Static screenshot preview */
    .project-screenshot {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: top center;
      z-index: 1;
      transition: transform .35s ease, filter .35s ease;
    }

    .project-card:not(.coming-soon):hover .project-screenshot {
      transform: scale(1.025);
      filter: brightness(1.03);
    }

    /* Coming soon bg */
    .coming-soon-bg {
      background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    }

    body.dark-mode .coming-soon-bg {
      background: linear-gradient(135deg, #0d1a2e 0%, #111c2f 100%);
    }

    .coming-soon-label {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .coming-soon-icon { font-size: 32px; }

    .project-card.coming-soon {
      opacity: .6;
    }

    /* Browser bar chrome */
    .project-browser-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border-top: 1px solid var(--line);
      background: rgba(255,255,255,.7);
      font-size: 12px;
    }

    body.dark-mode .project-browser-bar {
      background: rgba(15, 23, 42, .85);
    }

    .browser-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: rgba(100, 116, 139, .25);
      flex-shrink: 0;
    }

    .browser-dot.accent {
      background: var(--accent);
    }

    .project-url-pill {
      flex: 1;
      padding: 3px 10px;
      border-radius: 999px;
      background: rgba(159, 205, 240, .2);
      color: var(--muted);
      font-size: 11px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .project-open-btn {
      color: var(--accent-dark);
      font-weight: 800;
      font-size: 14px;
      text-decoration: none;
      flex-shrink: 0;
      padding: 2px 6px;
      border-radius: 6px;
      transition: background .15s;
    }

    .project-open-btn:hover {
      background: rgba(252, 176, 47, .15);
    }

    /* Project body */
    .project-body {
      padding: 22px 24px 24px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1;
    }

    .project-topline {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
    }

    .project-type {
      display: inline-flex;
      align-items: center;
      min-height: 26px;
      padding: 0 10px;
      border-radius: 999px;
      background: #fff7e8;
      color: var(--accent-dark);
      font-size: 12px;
      font-weight: 800;
    }

    body.dark-mode .project-type {
      background: rgba(252, 176, 47, .14);
      color: var(--accent);
    }

    .project-link-btn {
      color: var(--accent-dark);
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
    }

    .project-link-btn:hover {
      text-decoration: underline;
    }

    .project-body h3 {
      margin: 0;
      font-size: 22px;
      letter-spacing: -.04em;
    }

    .project-body p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.65;
    }

    /* Responsive */
    @media (max-width: 780px) {
      .project-grid { grid-template-columns: 1fr; }
      .project-frame-wrap { height: 190px; }
    }
  
/* ── Zertifikats-Logos: saubere Bilddarstellung ─────────── */
/* ══════════════════════════════════════════════════════════
   Certificate Logos – simple white square background
   ══════════════════════════════════════════════════════════ */
#certificates .cert-card { overflow: hidden; }

#certificates .cert-logo-wrap {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: auto !important;
  min-height: 120px;
  padding: 22px 28px;
  margin-bottom: 18px;
  border-radius: 16px;
  background: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(15, 23, 42, 0.06),
    0 2px 6px rgba(15, 23, 42, 0.04);
}

#certificates .cert-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 180px;
  max-height: 76px;
  object-fit: contain;
}

/* Wider logos (Cambridge, SAQ) — keep readable */
#certificates .cert-card:nth-child(4) .cert-logo,
#certificates .cert-card:nth-child(2) .cert-logo {
  max-width: 220px;
}

/* Dark mode: same white background with stronger shadow */
body.dark-mode #certificates .cert-logo-wrap {
  background: #ffffff !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.4),
    0 10px 28px rgba(0, 0, 0, 0.4);
}

/* Mobile adjustments */
@media (max-width: 680px) {
  #certificates .cert-logo-wrap {
    min-height: 104px;
    padding: 18px 22px;
  }
  #certificates .cert-logo {
    max-height: 64px;
  }
}

/* ── Legal Pages: Impressum & Datenschutz ───────────────── */
.legal-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 150px 28px 90px;
}
.legal-shell h1 {
  margin: 0;
  font-size: clamp(42px, 7vw, 76px);
  line-height: .95;
  letter-spacing: -.07em;
  font-weight: 800;
}
.legal-shell .intro {
  max-width: 760px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
}
.legal-card {
  padding: 0 !important;
  margin-top: 48px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  overflow: hidden;
}
body.dark-mode .legal-card {
  background: rgba(15,23,42,.8);
  box-shadow: 0 24px 80px rgba(0,0,0,.26);
}
.legal-content {
  padding: 42px;
}
.legal-content h2 {
  margin: 34px 0 12px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.035em;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.78;
}
.legal-content strong { color: var(--ink); }
.legal-content a {
  color: var(--accent-dark);
  font-weight: 750;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
body.dark-mode .legal-content a { color: var(--accent); }
.info-box {
  margin-top: 34px;
  padding: 22px 24px;
  border-radius: 24px;
  background: rgba(252,176,47,.12);
  border: 1px solid rgba(252,176,47,.25);
}
.info-box p:last-child { margin-bottom: 0; }
body.dark-mode .info-box { background: rgba(252,176,47,.1); }

@media (max-width: 680px) {
  .legal-shell { padding: 110px 18px 64px; }
  .legal-content { padding: 26px; }
  .legal-shell h1 { font-size: clamp(38px, 13vw, 56px); }
  .legal-shell .intro { font-size: 16px; }
  .legal-content h2 { font-size: 20px; }
}

/* Browser/Formulare passend zum aktiven Theme darstellen */
body { color-scheme: light; }
body.dark-mode { color-scheme: dark; }


/* ── Skill Icons: Simple Icons + Lucide Fallback ───────── */
.skill-bar-icon {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2f455c;
}

.skill-icon-brand,
.skill-icon-lucide {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #2f455c;
  transition: transform .2s ease, opacity .2s ease, color .2s ease;
}

.skill-icon-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
  transition: filter .2s ease, opacity .2s ease;
}

.skill-icon-lucide svg {
  width: 42px;
  height: 42px;
  stroke-width: 1.85;
}

.skill-bar-card:hover .skill-icon-brand,
.skill-bar-card:hover .skill-icon-lucide {
  transform: translateY(-2px) scale(1.06);
}

body.dark-mode .skill-bar-icon,
body.dark-mode .skill-icon-brand,
body.dark-mode .skill-icon-lucide {
  color: #dbeafe;
}

body.dark-mode .skill-icon-brand img {
  filter: brightness(0) saturate(100%) invert(91%) sepia(10%) saturate(889%) hue-rotate(183deg) brightness(101%) contrast(96%);
}

@media (max-width: 480px) {
  .skill-bar-icon { min-height: 42px; }
  .skill-icon-brand,
  .skill-icon-lucide { width: 36px; height: 36px; }
  .skill-icon-brand img,
  .skill-icon-lucide svg { width: 34px; height: 34px; }
}

/* ══════════════════════════════════════════════════════════
   Hero DevSecOps Graphic – single horizontal variant
   Soft glow background, no frame
   ══════════════════════════════════════════════════════════ */
.hero-devsecops {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* Soft radial glow behind the graphic */
.hero-devsecops::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(127, 196, 243, 0.28), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(252, 176, 47, 0.18), transparent 55%);
  filter: blur(40px);
  pointer-events: none;
}

body.dark-mode .hero-devsecops::before {
  background:
    radial-gradient(circle at 30% 40%, rgba(95, 157, 241, 0.22), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(252, 176, 47, 0.16), transparent 55%);
}

.devsecops-svg {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 44px rgba(66, 125, 178, 0.18));
}

body.dark-mode .devsecops-svg {
  filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.4));
}

/* Text readability tweaks for dark mode */
body.dark-mode .devsecops-svg text[fill="#374151"] { fill: #1f2937; }
body.dark-mode .devsecops-svg text[fill="#1c4dd0"] { fill: #93c5fd; }

/* ── Responsive: smaller on tablet/mobile ── */
@media (max-width: 980px) {
  .devsecops-svg { max-width: 540px; }
}

@media (max-width: 680px) {
  .hero-devsecops { padding: 16px 8px; }
  .devsecops-svg  { max-width: 100%; }
}

/* Floating clouds in hero – behind DevSecOps loop */
.hero .cloud {
  z-index: 0;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════
   LinkedIn icon button + CV download link
   ══════════════════════════════════════════════════════════ */

/* Icon-only round button for LinkedIn in hero */
.btn-icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  border: 1.5px solid var(--line);
  text-decoration: none;
  transition: all .2s ease;
}
.btn-icon-only:hover {
  background: #0a66c2;
  color: #fff;
  border-color: #0a66c2;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10, 102, 194, 0.3);
}
body.dark-mode .btn-icon-only {
  border-color: rgba(255,255,255,0.18);
  color: var(--muted);
}
body.dark-mode .btn-icon-only:hover {
  background: #0a66c2;
  color: #fff;
  border-color: #0a66c2;
}

/* Hero actions wrap nicely on small screens */
.hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Contact CV-Download link */
.contact-direct-info a {
  color: var(--accent-dark);
  text-decoration: none;
  font-weight: 600;
}
.contact-direct-info a:hover {
  text-decoration: underline;
}
.contact-cv {
  margin-top: 8px;
}
.contact-cv a {
  display: inline-flex;
  align-items: center;
  color: var(--accent-dark);
  font-weight: 700;
}

/* Footer LinkedIn pill */
.footer-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: all .2s ease;
}
.footer-linkedin:hover {
  background: #0a66c2;
  color: #fff;
  border-color: #0a66c2;
}
body.dark-mode .footer-linkedin {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}
body.dark-mode .footer-linkedin:hover {
  background: #0a66c2;
  color: #fff;
}

/* Mobile: stack hero buttons cleanly */
@media (max-width: 480px) {
  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .btn-icon-only {
    align-self: center;
  }
}

/* Kontaktformular – Status-Meldung nach Absenden */
.form-status{
  padding:14px 18px;
  border-radius:16px;
  margin-bottom:20px;
  font-size:15px;
  font-weight:650;
  line-height:1.5;
}
.form-status-ok{
  background:rgba(52,168,110,.12);
  color:#1c7a4d;
  border:1px solid rgba(52,168,110,.32);
}
.form-status-err{
  background:rgba(220,80,80,.1);
  color:#a33;
  border:1px solid rgba(220,80,80,.3);
}
body.dark-mode .form-status-ok{background:rgba(52,168,110,.16);color:#6ee7a8}
body.dark-mode .form-status-err{background:rgba(220,80,80,.16);color:#fca5a5}

/* ── Kontakt-Info-Karte (ersetzt das Formular) ── */
.contact-info-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  justify-content:center;
  padding:48px 38px;
  gap:6px;
}
.contact-avatar{
  width:120px;height:120px;
  border-radius:50%;
  overflow:hidden;
  border:4px solid rgba(255,255,255,.9);
  box-shadow:0 12px 34px rgba(66,125,178,.22);
  margin-bottom:22px;
}
body.dark-mode .contact-avatar{border-color:rgba(255,255,255,.16)}
.contact-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
.contact-info-card h3{
  margin:0;
  font-size:32px;
  letter-spacing:-.04em;
}
.contact-role{
  margin:6px 0 24px;
  color:var(--muted);
  font-size:16px;
  font-weight:600;
}
.contact-email{
  display:inline-flex;
  align-items:center;
  font-size:19px;
  font-weight:700;
  color:var(--accent-dark);
  text-decoration:none;
  transition:.2s;
}
.contact-email:hover{color:var(--accent);transform:translateY(-1px)}
body.dark-mode .contact-email{color:var(--accent)}
.contact-divider{
  width:100%;
  max-width:320px;
  height:1px;
  background:var(--line);
  margin:26px 0;
}
.contact-socials{
  display:flex;
  gap:16px;
  margin-bottom:30px;
}
.contact-socials a{
  display:grid;
  place-items:center;
  width:48px;height:48px;
  border-radius:14px;
  color:var(--accent-dark);
  background:rgba(159,205,240,.16);
  border:1px solid rgba(74,112,150,.14);
  transition:.2s;
}
.contact-socials a:hover{
  transform:translateY(-3px);
  background:var(--accent);
  color:#fff;
  border-color:transparent;
}
body.dark-mode .contact-socials a{background:rgba(95,157,241,.12);color:var(--accent);border-color:rgba(147,197,253,.16)}
.contact-cv-btn{
  display:inline-flex;
  align-items:center;
  min-height:50px;
  padding:0 26px;
  border-radius:999px;
  background:var(--accent);
  color:#111;
  font-weight:800;
  text-decoration:none;
  transition:.2s;
}
.contact-cv-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(252,176,47,.28)}

/* Navbar-Logo: Portrait statt MH-Text */
.brand-mark{overflow:hidden;padding:0}
.brand-mark img{width:100%;height:100%;object-fit:cover;object-position:center 30%;display:block}