/*
Theme Name: Sancho Heimrath Kommunikation
Theme URI: https://www.sanchoheimrath.de/
Author: Sancho Heimrath
Description: Portfolio-Theme mit 3D-Scroll-Startseite (NeoSynth-Story). Startseite aus assets/startseite.html, Unterseiten (Impressum, Datenschutz, Projekte) im selben dunklen Design.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: All rights reserved
Text Domain: sancho-heimrath
*/

@import url("assets/fonts.css");

:root {
  --c-deep: #050618; --c-surface: #0c183b; --c-struct: #225c8e; --c-accent: #1ccae3; --c-hi: #88f5ff;
  --c-ink: #ffffff; --c-ink-2: #b4c8e4; --c-line: rgba(28, 202, 227, 0.22);
  --f-display: "Archivo", system-ui, sans-serif; --f-body: "IBM Plex Sans", system-ui, sans-serif;
  --max: 1200px; --margin: clamp(16px, 4vw, 48px);
  --fs-h1: clamp(1.95rem, 3.4vw, 3.05rem); --fs-h2: clamp(1.5625rem, 2.6vw, 2.44rem); --fs-h3: 1.5625rem;
  --fs-lead: 1.25rem; --fs-body: 1rem; --fs-small: 0.875rem;
}
* { box-sizing: border-box; }
html { background: var(--c-deep); }
body { margin: 0; background: radial-gradient(120% 80% at 50% 0%, #0c183b 0%, #050618 60%) fixed; color: var(--c-ink-2); font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.6; }
a { color: var(--c-accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--margin); }
.site-head { position: sticky; top: 0; z-index: 5; background: rgba(5, 6, 24, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; }
.site-head .logo { display: inline-flex; align-items: center; gap: 12px; color: var(--c-ink); text-decoration: none; font-family: var(--f-display); font-weight: 800; font-stretch: 110%; }
.site-head .logo img { width: 44px; height: auto; }
.site-head .logo span { font-weight: 400; }
.site-head nav ul { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; }
.site-head nav a { color: var(--c-ink-2); text-decoration: none; font-size: var(--fs-small); }
.site-head nav a:hover { color: var(--c-ink); }
main.page { padding: 72px 0 96px; }
.page article { max-width: 46rem; background: rgba(12, 24, 59, 0.8); border: 1px solid var(--c-line); border-radius: 20px; padding: clamp(24px, 4vw, 48px); }
.page h1, .page h2, .page h3 { font-family: var(--f-display); font-weight: 800; font-stretch: 115%; text-transform: uppercase; color: var(--c-ink); line-height: 1.05; }
.page h1 { font-size: var(--fs-h1); margin: 0 0 24px; }
.page h2 { font-size: var(--fs-h2); margin: 40px 0 16px; }
.page h3 { font-size: var(--fs-h3); margin: 32px 0 12px; }
.page p, .page li { color: var(--c-ink-2); }
.site-foot { border-top: 1px solid var(--c-line); }
.site-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding-block: 32px; font-size: var(--fs-small); }
.site-foot ul { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.site-foot a { color: var(--c-ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--c-ink); text-decoration: underline; }
@media (max-width: 760px) { .site-head .wrap { flex-direction: column; align-items: flex-start; padding-block: 12px; } }