/* JARVIS: seitenspezifisches Layout, Farben und Schrift aus su.css */

/* HERO */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(80vh, 760px); align-items: stretch; border-bottom: 1px solid var(--kante); }
.hero-text { padding: 5rem 3rem 5rem max(var(--rand), (100vw - var(--max)) / 2); display: flex; flex-direction: column; justify-content: center; }
.hero-badge { display: inline-block; align-self: flex-start; color: var(--alu); font-size: 0.9rem; border: 1px solid var(--kante); border-radius: 3px; padding: 0.2rem 0.65rem; margin-bottom: 1.5rem; }
.hero-text h1 { font-size: clamp(3rem, 6vw, 5.5rem); line-height: 1; }
.hero-text h1 span { color: var(--blau); }
.hero-tagline { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--alu); margin-top: 1.5rem; max-width: 46ch; }
.hero-image { min-height: 500px; overflow: hidden; position: relative; background: var(--stahl); }
.hero-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* TECH STACK */
.stack-bar { border-bottom: 1px solid var(--kante); padding: 1.6rem var(--rand); }
.stack-inner { max-width: var(--max); margin: 0 auto; display: flex; gap: 0.5rem 0.6rem; flex-wrap: wrap; align-items: center; }
.stack-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.75rem; border: 1px solid var(--kante); border-radius: 3px; font-size: 0.9rem; color: var(--alu); }
.stack-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blau); flex-shrink: 0; }

/* ABSCHNITTE */
.section-intro { width: min(var(--max), 100% - 2 * var(--rand)); margin: 0 auto; padding-top: clamp(4rem, 8vw, 6rem); }
.section-label { font-size: 0.95rem; color: var(--blau); margin-bottom: 0.6rem; }
.section-title { margin-bottom: 0.8rem; }
.section-lead { font-size: 1.1rem; color: var(--alu); max-width: 62ch; }

/* BILDSCHIRMFOTOS */
.screenshot-grid { width: min(var(--max), 100% - 2 * var(--rand)); margin: 0 auto; padding: 2.5rem 0 1rem; }
.sc-row { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
.sc-row-2 { grid-template-columns: 1fr 1fr; }
.sc-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.sc-row-13 { grid-template-columns: 1fr 2fr; }
.sc-row-31 { grid-template-columns: 2fr 1fr; }
.sc-frame { border-radius: 10px; overflow: hidden; background: var(--stahl); border: 1px solid var(--kante); position: relative; }
.sc-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.sc-label { position: absolute; bottom: 0.6rem; left: 0.75rem; background: rgba(28,32,38,0.88); color: var(--weiss); font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 3px; border: 1px solid var(--kante); }
.sc-tall { min-height: 320px; }
.sc-medium { min-height: 240px; }
.sc-short { min-height: 180px; }

/* FUNKTIONEN */
.feature-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; width: min(var(--max), 100% - 2 * var(--rand)); margin: 0 auto; padding: 3.5rem 0; border-top: 1px solid var(--kante); }
.feature-block.reverse > :first-child { order: 2; }
.feature-block.reverse > :last-child { order: 1; }
.feature-sc { border-radius: 10px; overflow: hidden; border: 1px solid var(--kante); background: var(--stahl); }
.feature-sc img { width: 100%; }
.feature-text h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 1rem; }
.feature-text p { color: var(--alu); margin-bottom: 1rem; }
.feature-bullets { list-style: none; margin-top: 1.2rem; border-top: 1px solid var(--kante); }
.feature-bullets li { padding: 0.6rem 0; color: #d3d8de; border-bottom: 1px solid var(--kante); font-size: 0.98rem; }

/* GEDANKE */
.philosophy { border-top: 1px solid var(--kante); border-bottom: 1px solid var(--kante); padding: clamp(4rem, 8vw, 6rem) var(--rand); margin-top: clamp(3rem, 6vw, 5rem); }
.philosophy blockquote { max-width: 980px; margin: 0 auto; font-size: clamp(1.15rem, 2.3vw, 1.5rem); color: var(--weiss); line-height: 1.6; border-left: 2px solid var(--blau); padding-left: 1.5rem; }
.philosophy cite { display: block; margin-top: 1.5rem; font-size: 0.95rem; color: var(--alu); font-style: normal; }

/* GESCHICHTE */
.story-section { padding: clamp(4rem, 8vw, 6rem) var(--rand); }
.story-inner { max-width: 980px; margin: 0 auto; }
.story-inner h2 { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--kante); }
.story-inner h3 { font-size: 1.3rem; margin: 2.5rem 0 0.8rem; }
.story-inner p { color: #d3d8de; line-height: 1.75; margin-bottom: 1rem; max-width: none; font-size: 1.1rem; }
.story-closing { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--kante); font-size: 1.1rem; }
.story-closing strong { color: var(--weiss); }

/* ANFRAGE */
.cta-section { border-top: 1px solid var(--kante); }
.cta-section .huelle { padding-block: clamp(4rem, 8vw, 6rem); }
.cta-section h2 { margin-bottom: 0.8rem; }
.cta-section p { color: var(--alu); margin-bottom: 2rem; }
.cta-section .knoepfe { display: flex; flex-wrap: wrap; gap: 0.8rem; }

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero-text { padding: 3.5rem var(--rand) 3rem; }
    .hero-image { min-height: 320px; }
    .feature-block { grid-template-columns: 1fr; gap: 2rem; }
    .feature-block.reverse > :first-child { order: 1; }
    .feature-block.reverse > :last-child { order: 2; }
    .sc-row-3 { grid-template-columns: 1fr 1fr; }
    .sc-row-13, .sc-row-31 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .sc-row-2, .sc-row-3 { grid-template-columns: 1fr; }
    .sc-tall { min-height: 240px; }
}