/* ==========================================================================
   LILAPIXEL - Skills Section (Visual Bento Box)
   Ergänzung zu main.css für den visuellen "Das kann ich" Bereich
   ========================================================================== */

/* Header Styling */
.skills-header {
	text-align: center;
	margin-bottom: 1.5em;
}

.skills-header h2 {
	margin-bottom: 0;
}

.skills-header::after {
	background: #660066;
	content: '';
	display: inline-block;
	height: 2px;
	margin-top: 1.5em;
	width: 60px;
}

/* Intro Text */
.skills-intro {
	text-align: center;
	max-width: 800px;
	margin: 0 auto 2.5em;
	color: #666;
	line-height: 1.8;
}

/* Weniger Abstand vor der Section */
#two.main.style1 {
	padding-top: 3em;
}

/* Skills Grid - Bento Box Style */
.skills-bento {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto;
	gap: 1.5em;
}

/* Individual Skill Boxes */
.skill-box {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	cursor: default;
	transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.skill-box:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 40px rgba(102, 0, 102, 0.15);
}

/* Box Sizes - 2 Zeilen Layout */
/* Zeile 1: Grafikdesign (6) + Corporate (6) */
/* Zeile 2: Konzept (4) + Web (4) + KI (4) */

.skill-box.half {
	grid-column: span 6;
	min-height: 340px;
}

.skill-box.third {
	grid-column: span 4;
	min-height: 300px;
}

/* Content Layer */
.skill-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2em;
	background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.75) 50%, rgba(0,0,0,0.3) 80%, transparent 100%);
	color: #fff;
	z-index: 2;
}

.skill-content h3 {
	font-size: 1.4em;
	font-weight: 400;
	margin-bottom: 0.3em;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.skill-content p {
	font-size: 0.95em;
	opacity: 0.95;
	margin: 0;
	max-width: 400px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.skill-tags-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin-top: 1em;
}

.skill-tags-inline span {
	font-size: 0.75em;
	padding: 0.3em 0.8em;
	background: rgba(255,255,255,0.2);
	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 20px;
}

/* =====================================================
   VISUAL MOCKUPS
   ===================================================== */

/* 1. GRAFIKDESIGN - Flyer/Print Mockup */
.skill-box.grafikdesign {
	background: linear-gradient(135deg, #f8f4f9 0%, #efe5f3 100%);
}

.mockup-print {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	display: flex;
	gap: 1.5em;
	transition: transform 0.4s ease;
}

.skill-box.grafikdesign:hover .mockup-print {
	transform: translate(-50%, -55%) scale(1.05);
}

.flyer {
	width: 120px;
	height: 170px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 15px 35px rgba(102, 0, 102, 0.2);
	overflow: hidden;
	transform: rotate(-5deg);
}

.flyer:nth-child(2) {
	transform: rotate(3deg) translateY(20px);
}

.flyer-header {
	height: 45%;
	background: linear-gradient(135deg, #660066 0%, #945092 100%);
}

.flyer-content {
	padding: 12px;
}

.flyer-title {
	height: 10px;
	background: #333;
	border-radius: 2px;
	width: 70%;
	margin-bottom: 8px;
}

.flyer-line {
	height: 6px;
	background: #ddd;
	border-radius: 2px;
	margin-bottom: 6px;
}

.flyer-line:nth-child(3) { width: 90%; }
.flyer-line:nth-child(4) { width: 75%; }
.flyer-line:nth-child(5) { width: 60%; }

/* 2. CORPORATE DESIGN - Logo & Visitenkarte */
.skill-box.corporate {
	background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);
}

.mockup-branding {
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	transition: transform 0.4s ease;
}

.skill-box.corporate:hover .mockup-branding {
	transform: translate(-50%, -50%) scale(1.05);
}

.logo-circle {
	width: 80px;
	height: 80px;
	border: 3px solid #fff;
	border-radius: 50%;
	margin: 0 auto 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8em;
	color: #fff;
	font-weight: 600;
	letter-spacing: -0.05em;
}

.brand-colors {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 1.5em;
}

.color-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.3);
}

.color-dot:nth-child(1) { background: #660066; }
.color-dot:nth-child(2) { background: #945092; }
.color-dot:nth-child(3) { background: #c9a0c9; }
.color-dot:nth-child(4) { background: #f5f0f5; }

.visitenkarte {
	width: 160px;
	height: 95px;
	background: #fff;
	border-radius: 4px;
	margin: 0 auto;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
	padding: 15px;
	text-align: left;
}

.vk-logo {
	width: 30px;
	height: 30px;
	background: linear-gradient(135deg, #660066, #945092);
	border-radius: 4px;
	margin-bottom: 10px;
}

.vk-line {
	height: 5px;
	background: #333;
	border-radius: 2px;
	margin-bottom: 5px;
}

.vk-line:nth-child(2) { width: 60%; }
.vk-line:nth-child(3) { width: 80%; background: #999; height: 4px; }

/* 3. KONZEPT & STRATEGIE - Moodboard/Wireframe */
.skill-box.konzept {
	background: linear-gradient(135deg, #faf8f5 0%, #f0ebe3 100%);
}

.mockup-concept {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	transition: transform 0.4s ease;
}

.skill-box.konzept:hover .mockup-concept {
	transform: translate(-50%, -55%) scale(1.05);
}

.moodboard {
	display: grid;
	grid-template-columns: repeat(3, 55px);
	grid-template-rows: repeat(2, 55px);
	gap: 8px;
	transform: rotate(-3deg);
}

.mood-item {
	border-radius: 6px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.mood-item:nth-child(1) { 
	background: linear-gradient(135deg, #660066, #945092);
	grid-row: span 2;
	height: 118px;
}
.mood-item:nth-child(2) { background: #e8e0d5; }
.mood-item:nth-child(3) { background: #2d2d2d; }
.mood-item:nth-child(4) { 
	background: #fff; 
	border: 2px dashed #ccc;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mood-item:nth-child(5) { background: linear-gradient(135deg, #f5e6d3, #e8d5c4); }

.mood-plus {
	color: #999;
	font-size: 1.5em;
	font-weight: 300;
}

.idea-pins {
	position: absolute;
	top: -20px;
	right: -15px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pin {
	width: 40px;
	height: 16px;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	position: relative;
}

.pin::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 6px;
	background: #660066;
	border-radius: 50%;
}

/* 4. WEB & IT - Browser Mockup */
.skill-box.web {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.mockup-browser {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.4s ease;
}

.skill-box.web:hover .mockup-browser {
	transform: translate(-50%, -50%) scale(1.03);
}

.browser-window {
	width: 220px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 20px 50px rgba(0,0,0,0.3);
	overflow: hidden;
}

.browser-bar {
	background: #f0f0f0;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.browser-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.browser-dot:nth-child(1) { background: #ff5f56; }
.browser-dot:nth-child(2) { background: #ffbd2e; }
.browser-dot:nth-child(3) { background: #27ca40; }

.browser-url {
	flex: 1;
	margin-left: 10px;
	height: 20px;
	background: #fff;
	border-radius: 4px;
	border: 1px solid #ddd;
}

.browser-content {
	padding: 12px;
	min-height: 130px;
}

.web-header {
	height: 30px;
	background: linear-gradient(90deg, #660066, #945092);
	border-radius: 4px;
	margin-bottom: 12px;
}

.web-hero {
	height: 50px;
	background: linear-gradient(135deg, #f5f0f5, #efe5f3);
	border-radius: 4px;
	margin-bottom: 12px;
}

.web-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.web-box {
	height: 35px;
	background: #f5f5f5;
	border-radius: 4px;
}

/* 5. KI-BERATUNG - Chat Interface */
.skill-box.ki {
	background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
}

.mockup-ai {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	transition: transform 0.4s ease;
}

.skill-box.ki:hover .mockup-ai {
	transform: translate(-50%, -55%) scale(1.05);
}

.ai-chat {
	width: 200px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 12px;
	padding: 12px;
}

.chat-message {
	display: flex;
	gap: 10px;
	margin-bottom: 12px;
}

.chat-message.user {
	flex-direction: row-reverse;
}

.chat-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #444;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.chat-avatar.ai {
	background: #660066;
}

.chat-avatar-icon {
	font-size: 0.6em;
	color: #fff;
}

.chat-bubble {
	background: rgba(255,255,255,0.1);
	padding: 10px 14px;
	border-radius: 12px;
	max-width: 160px;
}

.chat-message.user .chat-bubble {
	background: #660066;
}

.chat-line {
	height: 6px;
	background: rgba(255,255,255,0.4);
	border-radius: 3px;
	margin-bottom: 5px;
}

.chat-line:last-child { 
	margin-bottom: 0; 
	width: 70%; 
}

.ai-sparkle {
	position: absolute;
	font-size: 1.2em;
	color: #945092;
	animation: sparkle 2s ease-in-out infinite;
}

.ai-sparkle:nth-child(1) { top: -15px; right: 20px; animation-delay: 0s; }
.ai-sparkle:nth-child(2) { top: 30px; right: -10px; animation-delay: 0.5s; }
.ai-sparkle:nth-child(3) { bottom: 40px; left: -15px; animation-delay: 1s; }

@keyframes sparkle {
	0%, 100% { opacity: 0.3; transform: scale(1); }
	50% { opacity: 1; transform: scale(1.2); }
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media screen and (max-width: 1140px) {
	/* Auf größeren Tablets: 2 Zeilen beibehalten */
	.skill-box.half {
		grid-column: span 6;
		min-height: 320px;
	}
	
	.skill-box.third {
		grid-column: span 4;
		min-height: 280px;
	}
}

@media screen and (max-width: 980px) {
	/* Auf kleineren Tablets: 2er Layout */
	.skill-box.half {
		grid-column: span 6;
		min-height: 300px;
	}
	
	.skill-box.third {
		grid-column: span 6;
		min-height: 280px;
	}
	
	/* Letzte Box (KI) volle Breite wenn ungerade */
	.skill-box.third:last-child {
		grid-column: span 12;
	}
}

@media screen and (max-width: 736px) {
	.skills-bento {
		gap: 1em;
	}
	
	.skill-box.half,
	.skill-box.third {
		grid-column: span 12;
		min-height: 280px;
	}
	
	.skill-content {
		padding: 1.5em;
	}
	
	.skill-content h3 {
		font-size: 1.2em;
	}
	
	.skill-content p {
		font-size: 0.9em;
	}
	
	.flyer {
		width: 100px;
		height: 140px;
	}
	
	.mockup-print {
		gap: 1em;
	}
	
	.browser-window {
		width: 240px;
	}
	
	.browser-content {
		min-height: 140px;
	}
	
	.moodboard {
		grid-template-columns: repeat(3, 60px);
		grid-template-rows: repeat(2, 60px);
	}
	
	.mood-item:nth-child(1) {
		height: 128px;
	}
	
	.ai-chat {
		width: 220px;
	}
	
	.logo-circle {
		width: 60px;
		height: 60px;
		font-size: 1.4em;
	}
	
	.visitenkarte {
		width: 130px;
		height: 80px;
		padding: 12px;
	}
}

@media screen and (max-width: 480px) {
	.skill-box.half,
	.skill-box.third {
		min-height: 260px;
	}
	
	.skill-content {
		padding: 1.25em;
	}
	
	.skill-tags-inline span {
		font-size: 0.7em;
		padding: 0.25em 0.6em;
	}
	
	.flyer {
		width: 80px;
		height: 115px;
	}
	
	.browser-window {
		width: 200px;
	}
	
	.browser-content {
		padding: 10px;
		min-height: 110px;
	}
	
	.moodboard {
		grid-template-columns: repeat(3, 50px);
		grid-template-rows: repeat(2, 50px);
		gap: 6px;
	}
	
	.mood-item:nth-child(1) {
		height: 106px;
	}
	
	.ai-chat {
		width: 180px;
		padding: 10px;
	}
}