/*
Theme Name: Medicalpunks Coming Soon
Theme URI: https://medicalpunks.de
Author: Stefan Elmshäuser
Author URI: https://stefanelmshaeuser.de
Description: Coming-soon-Theme für die Medicalpunks: Startseite mit Wortmarke, Laufband und Kontakt, dazu Impressum und Datenschutzerklärung, die beim Aktivieren automatisch angelegt werden. Keine Cookies, kein Tracking, Schriften lokal.
Version: 1.0.6
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: medicalpunks-soon
*/

@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
	--bp-ink: #0E0F12;
	--bp-ink-soft: #1A1C21;
	--bp-line: #2C2F37;
	--bp-acid: #D7FF3A;
	--bp-pink: #FF2E63;
	--bp-paper: #F3F2EE;
	--bp-muted: #A9AEBB;
	--bp-cond: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bp-ink); color: #fff; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--bp-acid); outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Kopf ---------- */
.bp-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px clamp(16px, 5vw, 64px); }
.bp-logo { font-family: var(--bp-cond); font-weight: 700; font-size: 28px; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; line-height: 1; }
.bp-logo span { color: var(--bp-acid); }
.bp-badge { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; border: 1.5px solid var(--bp-acid); color: var(--bp-acid); border-radius: 999px; padding: 7px 14px; white-space: nowrap; }

/* ---------- Coming soon ---------- */
.bp-hero { position: relative; overflow: hidden; min-height: calc(100svh - 190px); display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 6vw, 80px) clamp(16px, 5vw, 64px); }
.bp-hero::before { content: ""; position: absolute; width: 70vmax; height: 70vmax; right: -25vmax; top: -30vmax; background: radial-gradient(circle, rgba(215,255,58,.16), transparent 60%); pointer-events: none; }
.bp-hero::after { content: ""; position: absolute; width: 60vmax; height: 60vmax; left: -30vmax; bottom: -35vmax; background: radial-gradient(circle, rgba(255,46,99,.14), transparent 60%); pointer-events: none; }
.bp-hero > * { position: relative; z-index: 1; max-width: 1200px; }
.bp-kicker { margin: 0 0 18px; font-size: 15px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--bp-acid); }
.bp-word { margin: 0; font-family: var(--bp-cond); font-weight: 700; text-transform: uppercase; line-height: .82; letter-spacing: -.01em; font-size: clamp(64px, 13vw, 190px); }
.bp-word span { display: block; }
.bp-word .bp-punks { color: var(--bp-acid); }
.bp-motto { display: block; width: clamp(200px, 22vw, 300px); height: auto; margin: 0 0 26px; transform: rotate(-3deg); }
.bp-word .bp-punks::after { content: "."; color: var(--bp-pink); }
.bp-lead { margin: 32px 0 0; max-width: 640px; font-size: clamp(19px, 2.2vw, 24px); line-height: 1.45; color: #E4E6EB; }
.bp-origin { margin: 22px 0 0; font-size: 16px; line-height: 1.5; color: var(--bp-muted); max-width: 640px; }
.bp-origin a { color: #fff; text-decoration-color: var(--bp-acid); text-underline-offset: 3px; }
.bp-origin a:hover { color: var(--bp-acid); }
.bp-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.bp-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-family: var(--bp-cond); font-weight: 700; font-size: 21px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.bp-btn:hover { transform: translateY(-2px); }
.bp-btn--acid { background: var(--bp-acid); color: var(--bp-ink); }
.bp-btn--ghost { border: 2px solid var(--bp-line); color: #fff; }
.bp-btn--ghost:hover { border-color: #fff; }
.bp-sticker { position: absolute; right: clamp(16px, 6vw, 96px); top: clamp(24px, 6vw, 72px); width: clamp(92px, 12vw, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--bp-pink); color: #fff; display: grid; place-items: center; text-align: center; font-family: var(--bp-cond); font-weight: 700; font-size: clamp(16px, 1.9vw, 22px); line-height: .95; text-transform: uppercase; transform: rotate(12deg); }

/* ---------- Laufband ---------- */
.bp-ticker { overflow: hidden; background: var(--bp-acid); color: var(--bp-ink); border-block: 2px solid var(--bp-ink); }
.bp-ticker__track { display: flex; width: max-content; animation: bp-marquee 32s linear infinite; }
.bp-ticker__track span { font-family: var(--bp-cond); font-weight: 700; font-size: 26px; text-transform: uppercase; letter-spacing: .03em; padding: 12px 0; white-space: nowrap; }
@keyframes bp-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .bp-ticker__track { animation: none; } .bp-btn { transition: none; } html { scroll-behavior: auto; } }

/* ---------- Fuß ---------- */
.bp-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding: 28px clamp(16px, 5vw, 64px); font-size: 15px; color: var(--bp-muted); }
.bp-footer nav { display: flex; flex-wrap: wrap; gap: 20px; }
.bp-footer a { text-decoration: none; }
.bp-footer a:hover { color: #fff; text-decoration: underline; }

/* ---------- Pflichtseiten ---------- */
.bp-page { background: var(--bp-paper); color: var(--bp-ink); padding: clamp(40px, 7vw, 96px) clamp(16px, 5vw, 64px); }
.bp-page__inner { max-width: 760px; margin: 0 auto; }
.bp-page .wp-block-post-title { font-family: var(--bp-cond); font-weight: 700; text-transform: uppercase; font-size: clamp(44px, 7vw, 80px); line-height: .9; margin: 0 0 40px; }
.bp-page .wp-block-post-content { font-size: 18px; line-height: 1.65; overflow-wrap: anywhere; }
.bp-page .wp-block-post-content h2 { font-family: var(--bp-cond); font-weight: 700; font-size: 28px; text-transform: uppercase; margin: 2.2em 0 .5em; line-height: 1.1; }
.bp-page .wp-block-post-content a { color: #C0103F; }
.bp-back { display: inline-block; margin-bottom: 32px; font-weight: 600; text-decoration: none; color: var(--bp-ink); }
.bp-back:hover { text-decoration: underline; }

@media (max-width: 600px) {
	.bp-sticker { display: none; }
	.bp-hero { min-height: auto; }
	.bp-badge { display: none; }
	.bp-btn { width: 100%; justify-content: center; }
	.bp-ticker__track span { font-size: 22px; }
}