/* ZANE About-Seite. Baut auf journal.css auf (Tokens in .zj), Farben und Schriften aus dem Skill zane-design. */

/* Entwurfsleiste und Pruefmarken */
.za .za-draft { padding: 10px 24px; background: #1A1400; border-bottom: 1px solid rgba(255, 201, 33, .35); color: var(--zj-yellow); font-size: 13px; line-height: 1.5; text-align: center; }
.za .za-draft b { color: var(--zj-white); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.za .za-note { display: inline-block; margin: 0 2px; padding: 2px 8px; border-radius: 999px; font: 700 11px/1.4 var(--zj-sans); letter-spacing: .02em; vertical-align: 2px; white-space: nowrap; text-transform: none; }
.za .za-note--a { background: rgba(255, 129, 0, .16); border: 1px solid rgba(255, 129, 0, .7); color: #FFB066; }
.za .za-note--q { background: rgba(255, 201, 33, .10); border: 1px dashed rgba(255, 201, 33, .8); color: var(--zj-yellow); }

/* Kopf mit Hawaii-Bild */
.za .za-hero { position: relative; display: flex; align-items: flex-end; min-height: min(86vh, 780px); overflow: hidden; background: #000; }
.za .za-hero-img { position: absolute; inset: 0; }
.za .za-hero-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.za .za-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .72) 32%, rgba(0, 0, 0, .15) 62%, rgba(0, 0, 0, 0) 100%), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 28%); }
.za .za-hero-txt { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 140px 24px 76px; }
.za .za-hero-txt > * { max-width: 640px; }
.za .za-hero-txt > .za-h1 { max-width: 900px; }
.za .za-h1 { margin: 0; color: var(--zj-white); font-family: var(--zj-display); font-weight: 400; font-size: clamp(56px, 6.6vw, 100px); line-height: .9; letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.za .za-h1 span { color: var(--zj-yellow); }
.za .za-lead { margin: 22px 0 0; max-width: 52ch; color: #E6E6E6; font-size: 20px; line-height: 1.55; }
.za .za-duo { display: flex; align-items: center; gap: 14px; margin-top: 28px; color: var(--zj-body); }
.za .za-duo-img { display: flex; flex: none; }
.za .za-duo-img img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--zj-yellow); object-fit: cover; object-position: center 20%; background: #000; }
.za .za-duo-img img + img { margin-left: -12px; }
.za .za-duo b { display: block; color: var(--zj-white); font-size: 15px; }
.za .za-duo small { display: block; color: var(--zj-muted); font-size: 13px; }

.za .za-wrap { padding-top: 0; padding-bottom: 96px; }

/* Zahlen */
.za .za-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--zj-line); border-bottom: 1px solid var(--zj-line); }
.za .za-stats li { padding: 26px 24px 24px 0; }
.za .za-stats li + li { padding-left: 24px; border-left: 1px solid var(--zj-line); }
.za .za-stats b { display: block; color: var(--zj-yellow); font-family: var(--zj-display); font-weight: 400; font-size: 64px; line-height: .9; letter-spacing: .02em; }
.za .za-stats span { display: block; margin-top: 8px; color: var(--zj-body); font-size: 14px; line-height: 1.45; }

/* Abschnitte */
.za .za-sect { padding-top: 96px; }
.za .za-h2 { margin: 0 0 18px; color: var(--zj-white); font-family: var(--zj-display); font-weight: 400; font-size: clamp(38px, 4vw, 54px); line-height: .95; letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
.za .za-sect p { margin: 0 0 18px; color: var(--zj-text); font-size: 18px; line-height: 1.7; }
.za .za-sect-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px; margin-bottom: 28px; }
.za .za-sect-h .za-h2 { margin: 0; }
.za .za-sect-h p { margin: 0; color: var(--zj-muted); font-size: 16px; }
.za .za-narrow { max-width: 760px; }

.za .za-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; }
.za .za-split--rev .za-txt { order: 2; }
.za .za-fig { margin: 0; }
.za .za-fig img { display: block; width: 100%; height: auto; border-radius: 6px; filter: grayscale(1) contrast(1.06); }
.za .za-fig figcaption { margin-top: 10px; }

/* Ergebnis im Story-Stil: orange Linie, orange Label */
.za .za-story { margin: 26px 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--zj-orange); }
.za .za-story-h { margin: 0 0 6px !important; color: var(--zj-orange) !important; font: 700 12px/1.2 var(--zj-sans) !important; letter-spacing: .16em; text-transform: uppercase; }
.za .za-story p:last-child { margin: 0; color: var(--zj-white); font-size: 21px; line-height: 1.45; font-weight: 600; }

.za .za-big { margin: 30px 0 0 !important; color: var(--zj-white) !important; font-family: var(--zj-display); font-size: clamp(34px, 3.6vw, 48px) !important; line-height: 1 !important; letter-spacing: .03em; text-transform: uppercase; text-wrap: balance; }
.za .za-big span { color: var(--zj-yellow); }

.za .za-quote { margin: 30px 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--zj-yellow); color: var(--zj-white); font-size: 24px; line-height: 1.45; font-weight: 600; }

/* Zwei Wege */
.za .za-duo-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.za .za-card { padding: 30px 30px 14px; background: var(--zj-card); border: 1px solid var(--zj-line); border-radius: 16px; }
.za .za-card:first-child { background: radial-gradient(120% 120% at 100% 0%, rgba(0, 120, 190, .22), transparent 55%), var(--zj-card); }
.za .za-card:last-child { background: radial-gradient(120% 120% at 100% 0%, rgba(255, 129, 0, .16), transparent 55%), var(--zj-card); }
.za .za-place { margin: 0 0 10px !important; color: var(--zj-yellow) !important; font: 700 12px/1.2 var(--zj-sans) !important; letter-spacing: .16em; text-transform: uppercase; }
.za .za-card h3 { margin: 0 0 12px; color: var(--zj-white); font-family: var(--zj-display); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: .03em; }

/* Grosse Zahl */
.za .za-bignum { padding: 40px 36px; background: radial-gradient(120% 140% at 0% 0%, rgba(255, 129, 0, .18), transparent 55%), var(--zj-ink); border: 1px solid var(--zj-line); border-radius: 16px; }
.za .za-bignum b { display: block; color: var(--zj-yellow); font-family: var(--zj-display); font-weight: 400; font-size: clamp(110px, 13vw, 180px); line-height: .85; }
.za .za-bignum span { display: block; max-width: 26ch; margin-top: 10px; color: var(--zj-white); font-size: 20px; line-height: 1.4; font-weight: 600; }

/* Antrieb und Maenner */
.za .za-two { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
.za .za-panel { padding: 34px 34px 18px; background: var(--zj-ink); border: 1px solid var(--zj-line); border-radius: 16px; }
.za .za-panel .za-h2 { font-size: clamp(34px, 3vw, 42px); }
.za .za-panel-end { color: var(--zj-white) !important; font-weight: 700; }

/* Gruender */
.za .za-founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.za .za-founder { overflow: hidden; background: var(--zj-card); border: 1px solid var(--zj-line); border-radius: 16px; }
.za .za-founder-img { border-bottom: 3px solid var(--zj-yellow); background: #000; }
.za .za-founder-img img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 18%; }
.za .za-founder-body { padding: 26px 30px 30px; }
.za .za-founder h3 { margin: 0; color: var(--zj-white); font-family: var(--zj-display); font-weight: 400; font-size: 52px; line-height: 1; letter-spacing: .03em; }
.za .za-role { margin: 6px 0 18px !important; color: var(--zj-yellow) !important; font: 700 13px/1.3 var(--zj-sans) !important; letter-spacing: .12em; text-transform: uppercase; }
.za .za-check { margin: 0 0 22px; padding: 0; list-style: none; }
.za .za-check li { position: relative; margin: 0 0 10px; padding-left: 28px; color: var(--zj-text); font-size: 16px; line-height: 1.5; }
.za .za-check li::before { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border: 2px solid var(--zj-yellow); border-radius: 2px; }
.za .za-founder blockquote { margin: 0 0 18px; padding: 16px 0 0; border-top: 1px solid var(--zj-line); color: var(--zj-white); font-size: 20px; line-height: 1.45; font-weight: 600; }
.za .za-habit { margin: 0 0 18px !important; color: var(--zj-body) !important; font-size: 15px !important; }
.za .za-habit b { color: var(--zj-white); }
body.zj-page .zj .za-more { color: var(--zj-yellow); font: 700 13px/1.2 var(--zj-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
body.zj-page .zj .za-more::after { content: ' →'; }
body.zj-page .zj .za-more:hover { color: var(--zj-white); }
.za .za-split-line { margin: 44px auto 0 !important; max-width: 38ch; color: var(--zj-white) !important; font-family: var(--zj-display); font-size: clamp(30px, 3vw, 40px) !important; line-height: 1.05 !important; letter-spacing: .03em; text-transform: uppercase; text-align: center; }
.za .za-split-line span { color: var(--zj-yellow); }

/* Ueberzeugungen */
.za .za-beliefs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: za; }
.za .za-beliefs li { counter-increment: za; padding: 22px 20px 20px; background: var(--zj-card); border: 1px solid var(--zj-line); border-radius: 16px; color: var(--zj-body); font-size: 15px; line-height: 1.5; }
.za .za-beliefs li::before { content: '0' counter(za); display: block; margin-bottom: 14px; color: var(--zj-yellow); font-family: var(--zj-display); font-size: 40px; line-height: 1; }
.za .za-beliefs b { display: block; margin-bottom: 6px; color: var(--zj-white); font-size: 17px; line-height: 1.3; }
body.zj-page .zj .za-beliefs a { color: var(--zj-yellow); text-decoration: underline; text-underline-offset: 3px; }

/* Haltung */
.za .za-manifest { margin-top: 96px; padding: 64px 0 60px; border-top: 1px solid var(--zj-line); border-bottom: 1px solid var(--zj-line); text-align: center; }
.za .za-manifest p { margin: 0 auto 12px; max-width: 60ch; color: var(--zj-body); font-size: 18px; }
.za .za-manifest .za-manifest-h { margin: 0 auto; max-width: 16ch; color: var(--zj-white); font-family: var(--zj-display); font-size: clamp(48px, 6.4vw, 92px); line-height: .92; letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.za .za-manifest-h span { color: var(--zj-yellow); }

/* App-Karte und Kontakt */
.za .za-app { margin-top: 128px; }
.za .za-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; margin-top: 96px; padding: 40px; background: radial-gradient(90% 140% at 100% 100%, rgba(0, 120, 190, .20), transparent 60%), var(--zj-ink); border: 1px solid var(--zj-line); border-radius: 16px; }
.za .za-contact .za-h2 { margin-bottom: 12px; }
.za .za-contact p { max-width: 54ch; }
body.zj-page .zj .za-mail { color: var(--zj-yellow); font: 700 24px/1.2 var(--zj-sans); text-decoration: none; }
body.zj-page .zj .za-mail:hover { color: var(--zj-white); }
.za .za-contact address { padding-left: 28px; border-left: 1px solid var(--zj-line); color: var(--zj-body); font-size: 15px; font-style: normal; line-height: 1.75; }

/* Tablet */
@media (max-width: 960px) {
	.za .za-hero { display: block; min-height: 0; }
	.za .za-hero-img { position: relative; inset: auto; aspect-ratio: 4 / 3; }
	.za .za-hero-img img { object-position: 68% center; }
	.za .za-hero::after { background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0) 22%); bottom: auto; height: calc(100vw * .75); }
	.za .za-hero-txt { padding: 8px 24px 48px; }
	.za .za-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.za .za-stats li:nth-child(3) { padding-left: 0; border-left: 0; }
	.za .za-stats li:nth-child(n+3) { border-top: 1px solid var(--zj-line); }
	.za .za-split, .za .za-two, .za .za-founders, .za .za-duo-cards { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.za .za-split--rev .za-txt { order: 0; }
	.za .za-beliefs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.za .za-contact { grid-template-columns: minmax(0, 1fr); }
	.za .za-contact address { padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid var(--zj-line); }
}

/* Handy */
@media (max-width: 640px) {
	.za .za-draft { padding: 10px 16px; text-align: left; }
	.za .za-hero-txt { padding: 4px 16px 40px; }
	.za .za-h1 { font-size: 54px; }
	.za .za-lead { font-size: 18px; }
	.za .za-stats li, .za .za-stats li + li { padding: 20px 12px 18px 0; }
	.za .za-stats li:nth-child(even) { padding-left: 14px; }
	.za .za-stats b { font-size: 48px; }
	.za .za-stats span { font-size: 13px; }
	.za .za-sect { padding-top: 72px; }
	.za .za-sect p { font-size: 17px; }
	.za .za-quote { font-size: 20px; }
	.za .za-card, .za .za-panel { padding: 24px 22px 10px; }
	.za .za-bignum { padding: 30px 24px; }
	.za .za-founder-body { padding: 22px 22px 26px; }
	.za .za-founder h3 { font-size: 44px; }
	.za .za-beliefs { grid-template-columns: minmax(0, 1fr); }
	.za .za-manifest { padding: 48px 0 44px; }
	.za .za-app { margin-top: 120px; }
	.za .za-contact { padding: 28px 22px; }
	body.zj-page .zj .za-mail { font-size: 20px; }
}

/* Eyebrows in Abschnitten gegen die Absatzregel absichern */
.za .za-sect .zj-eyebrow { margin: 0 0 12px; color: var(--zj-yellow); font: 700 12px/1.2 var(--zj-sans); letter-spacing: .16em; text-transform: uppercase; }

/* ---------------- Angleichung an Startseite, Kontakt und Funnel (2026-10-19), siehe Ende von journal.css ---------------- */
body.zj-page .zj .za-h2 { font-family: var(--zj-sans); font-weight: 800; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -.025em; text-transform: none; }
body.zj-page .zj .za-card h3 { font-family: var(--zj-sans); font-weight: 800; font-size: 28px; line-height: 1.15; letter-spacing: -.02em; }
body.zj-page .zj .za-founder h3 { font-family: var(--zj-sans); font-weight: 800; font-size: 34px; line-height: 1.1; letter-spacing: -.025em; }
body.zj-page .zj .za-split-line { font-family: var(--zj-sans) !important; font-weight: 800; font-size: clamp(22px, 2.3vw, 28px) !important; line-height: 1.3 !important; letter-spacing: -.02em; text-transform: none; }
body.zj-page .zj .za-more { font: 700 15px/1.3 var(--zj-sans); letter-spacing: 0; text-transform: none; }
.za .za-story { border-left-color: var(--zj-yellow); }
.za .za-story-h { color: var(--zj-yellow) !important; }
.za .za-check li::before { top: 3px; width: 18px; height: 18px; border: 0; border-radius: 0; background: var(--zj-yellow); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66 77.66l-128 128a8 8 0 0 1-11.32 0l-56-56a8 8 0 0 1 11.32-11.32L96 188.69 218.34 66.34a8 8 0 0 1 11.32 11.32z'/%3E%3C/svg%3E") center / contain no-repeat; }
.za .za-bignum { background: radial-gradient(120% 140% at 0% 0%, rgba(255, 201, 33, .13), transparent 55%), var(--zj-ink); }
.za .za-contact { background: radial-gradient(90% 140% at 100% 100%, rgba(255, 201, 33, .08), transparent 60%), var(--zj-ink); }
.za .za-card, .za .za-bignum, .za .za-panel, .za .za-founder, .za .za-beliefs li, .za .za-contact { border-radius: 18px; }
.za .za-fig img { border-radius: 18px; }
.za .za-hero::after { background: linear-gradient(90deg, rgba(8, 8, 10, .9) 0%, rgba(8, 8, 10, .72) 32%, rgba(8, 8, 10, .15) 62%, rgba(8, 8, 10, 0) 100%), linear-gradient(0deg, #08080A 0%, rgba(8, 8, 10, 0) 28%); }
@media (max-width: 960px) { .za .za-hero::after { background: linear-gradient(0deg, #08080A 0%, rgba(8, 8, 10, 0) 22%); } }