/* PraxisTraining.at — Corporate Design (First Aid Solutions GmbH) Matches erstehilfekurs.at exactly: same tokens, same header/button treatment. Source of truth: erstehilfekurs.at/css/style.css. Overrides the per-page :root tokens defined inline in ; loaded after them on purpose. */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root{ /* --- exact erstehilfekurs.at palette --- */ --primary: #DC143C; --primary-dark: #B81032; --primary-light: #F0AEBB; --primary-bg: #FCE7EC; --text-dark: #241F1B; --text-gray: #4A443E; --text-light: #79706A; --bg-cream: #F7F4EF; --bg-cream-2: #FBF8F3; --bg-white: #FFFFFF; --border: #E7E1D8; --border-2: #EFEAE2; --success: #0F7A43; --label-pink: #FCE7EC; --label-text: #B81032; } body{ font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--text-dark); } h1, h2, h3, .logo, .stat-number, .detail-value, .testimonial-name{ font-family: 'Fraunces', Georgia, serif; } h1, h2, h3{ letter-spacing: -0.01em; } /* Buttons — erstehilfekurs.at uses full pill buttons; match exactly. */ .btn-primary, .cta-button, .header-cta, .back-link, .submit{ border-radius: 999px; box-shadow: 0 8px 22px rgba(220,20,60,.24); transition: transform .12s ease, background .16s ease, box-shadow .16s ease; } .btn-primary:hover, .cta-button:hover, .header-cta:hover, .back-link:hover, .submit:hover{ box-shadow: 0 12px 28px rgba(220,20,60,.32); } .btn-secondary{ border-radius: 999px; } /* Header — sticky, translucent, blurred, matching erstehilfekurs.at's .site-header. */ .header{ position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(150%) blur(12px); backdrop-filter: saturate(150%) blur(12px); border-bottom: 1px solid var(--border-2); } .nav{ gap: .35rem; } .nav a{ position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .8rem; border-radius: 9px; font-size: .94rem; font-weight: 600; color: var(--text-gray); transition: color .15s ease, background .15s ease; } .nav a:hover{ color: var(--primary-dark); background: var(--bg-cream); } /* Reality Shot — real training photo, full width beneath the hero */ .reality-shot{ background: var(--bg-white); padding: 0 0 3rem; } .reality-figure{ margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--border); position: relative; } .reality-figure img{ display: block; width: 100%; height: clamp(220px, 38vw, 420px); object-fit: cover; object-position: 50% 30%; } .reality-figure figcaption{ position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.4rem; background: linear-gradient(0deg, rgba(43,20,15,.72), rgba(43,20,15,0)); color: #fff; font-size: .88rem; font-weight: 500; } @media (max-width: 640px){ .reality-figure figcaption{ font-size: .82rem; padding: .9rem 1rem; } } /* Trainer photo — real stock photo beside the trainer stats/features */ .trainer-layout{ display: grid; grid-template-columns: 1.3fr 1fr; gap: 1.75rem; align-items: stretch; } .trainer-photo{ margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); min-height: 260px; } .trainer-photo img{ display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 860px){ .trainer-layout{ grid-template-columns: 1fr; } .trainer-photo{ min-height: 220px; } }