/* zwei faden — Marken-Sektionen: Block-eigenes CSS (lebt mit dem Block, nicht im Theme).
 * Werte 1:1 aus der freigegebenen theme.css übernommen (Pixel-Parität). Die Innen-Texte
 * der Listen (Timeline/Werte) sind native Blöcke OHNE Design-Klassen — ihre Typo ist hier
 * positional gescopt (Abschnitt «Innen-Texte»), entspricht den früheren .h-md / .muted. */

/* Markenseiten-Sektionen direkt aneinander — kein heller Wrapper-Spalt zwischen den Farbflächen */
.brand-weave > * + * { margin-block-start: 0; }

/* --- Hero --- */
.maker-hero { padding-block: clamp(48px,6vw,96px) clamp(36px,4vw,64px); }
.maker-hero .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px,5vw,80px); align-items: center; }
.maker-hero .hero-copy .tag { margin-bottom: 24px; }
.maker-hero .hero-title { font-size: clamp(46px,6.8vw,100px); margin-bottom: 26px; }
.maker-hero .hero-copy .lead { max-width: 46ch; }
.maker-hero .hero-cta { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 34px; }
.maker-hero .hero-media { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.maker-hero .hero-media img { width: 100%; aspect-ratio: 4/5; height: auto; object-fit: cover; display: block; }
.maker-hero .hero-media.on-ink { background: var(--ink); display: flex; align-items: center; justify-content: center; }
.brand-berry .maker-hero .hero-media.on-ink { background: #000; }
.maker-hero .hero-media.on-ink img { width: 72%; height: auto; aspect-ratio: auto; object-fit: contain; }
.hero-media.brand-logo { background: var(--paper-deep); }
.hero-media.brand-logo img { height: clamp(300px,40vw,460px); aspect-ratio: auto; object-fit: contain; }
.maker-hero .hero-cap, .maker-hero .hero-media figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 34px 20px 16px; font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper); background: linear-gradient(transparent,rgba(33,52,60,.6)); }
/* Tag-Markenfarbe aus dem brand-Kontext (statt .tag.berry/.tag.weave im Inhalt) */
.brand-berry .maker-hero .tag { color: var(--berry); border-color: rgba(177,31,124,.32); }
.brand-weave .maker-hero .tag { color: var(--weave); border-color: rgba(28,111,104,.35); }

/* --- gewobener Streifen (Weberei-Trenner) --- */
.weave-strip { height: 14px; background: url('/wp-content/uploads/2026/06/weave-teal-strip.jpg') center/cover; }

/* --- Timeline --- */
.journey { padding-block: clamp(56px,7vw,112px); }
.journey.alt { background: var(--paper-soft); }
/* Weberei: «Mein Weg» dunkler — ersetzt die Trennung des entfernten Streifens */
.brand-weave .journey { background: var(--paper-deep); }
.journey-head { max-width: 34ch; margin-bottom: clamp(40px,5vw,72px); }
.journey-head .eyebrow { margin-bottom: 18px; }
.journey-head .lead { margin-top: 18px; }
.timeline { list-style: none; margin: 0 auto 0 0; padding: 0; max-width: 760px; }
.tl-item { display: grid; grid-template-columns: 140px 1fr; gap: clamp(20px,4vw,56px); padding: clamp(24px,3.2vw,38px) 0; border-top: 1px solid var(--line); }
.tl-item:last-child { border-bottom: 1px solid var(--line); }
.tl-year { font-family: var(--serif); font-size: clamp(30px,3.6vw,48px); font-weight: 500; line-height: 1; letter-spacing: .01em; margin: 0; }
.tl-body h3 { margin: 0 0 10px; }
.tl-body p { max-width: 54ch; margin: 0; font-size: 16.5px; line-height: 1.7; }
.brand-berry .tl-year { color: var(--berry); }
.brand-weave .tl-year { color: var(--weave); }

/* --- Pull-Quote --- */
.quote-band { background: var(--ink); color: var(--paper); padding-block: clamp(64px,8vw,120px); }
.quote-band .wrap { max-width: 980px; text-align: center; }
.pullquote { font-family: var(--serif); font-weight: 400; font-size: clamp(28px,4.4vw,56px); line-height: 1.16; color: var(--paper); margin: 0 auto; max-width: 20ch; }
.pullquote em { font-style: italic; }
.brand-berry .pullquote em { color: var(--berry-soft); }
.brand-weave .pullquote em { color: var(--brass); }
.pullquote-by { margin: 30px auto 0; max-width: 56ch; color: rgba(244,239,230,.66); font-size: clamp(16px,1.5vw,19px); line-height: 1.6; }

/* --- Werte --- */
.values { padding-block: clamp(56px,7vw,108px); }
.values-head { max-width: 30ch; margin-bottom: clamp(36px,5vw,64px); }
.values-head .eyebrow { margin-bottom: 16px; }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(28px,4vw,56px); }
@media (max-width: 760px) { .values-grid { grid-template-columns: 1fr; } }
.value-item { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; border-top: 2px solid var(--berry); }
.value-item h3 { margin: 0; }
.value-num { font-family: var(--serif); font-size: 20px; color: var(--berry); letter-spacing: .1em; }
.brand-weave .value-item { border-top-color: var(--weave); }
.brand-weave .value-num { color: var(--weave); }

/* --- Unikat --- */
.unikat { padding-block: clamp(56px,7vw,108px); }
.unikat.alt { background: var(--paper-soft); }
.unikat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,76px); align-items: center; }
.unikat-media { margin: 0; border-radius: var(--radius); overflow: hidden; }
.unikat-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.unikat-copy .eyebrow { margin-bottom: 18px; }
.unikat-copy h2 { margin: 0 0 22px; max-width: 18ch; }
.unikat-copy p:not(.signature) { max-width: 52ch; font-size: 17px; line-height: 1.75; }
.unikat-copy .muted { font-size: 16px; }
.signoff { margin-top: 30px; }
.signature { font-family: 'Allura',cursive; font-size: clamp(40px,5vw,62px); line-height: 1; display: inline-block; }
.brand-weave .signature { color: var(--weave); }
.brand-berry .signature { color: var(--berry); }

/* --- Stücke --- */
.stuecke-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px,3.4vw,48px); }
.stuecke-head .eyebrow { margin-bottom: 14px; }
.stuecke-head h2 { margin: 0; }

@media (max-width: 880px) {
	.maker-hero .hero-grid, .unikat-grid { grid-template-columns: 1fr; }
	.maker-hero .hero-media { order: -1; }
	.maker-hero .hero-media.on-ink { aspect-ratio: 16/10; }
	.unikat-grid .unikat-media { order: -1; }   /* Bild zuoberst auf Mobile (beide Marken) */
	.unikat-media img { aspect-ratio: 16/11; }
	.tl-item { grid-template-columns: 78px 1fr; gap: 18px; }
}

/* Markenseiten: Core-Block-Gap in eigenen Grid-/Flex-Containern neutralisieren */
.values-grid > * + *, .unikat-grid > * + *, .tl-item > * + *, .stuecke-head > * + *, .maker-hero .hero-cta > * + * { margin-block-start: 0; }

/* ====== Innen-Texte der Listen ohne Design-Klassen → Typo positional (= .h-md / .muted) ====== */
.tl-body h3, .value-item h3 {
	font-family: var(--serif); font-size: var(--wp--preset--font-size--large);
	line-height: 1.1; font-weight: 500;
}
.tl-body p, .value-item p { color: var(--ink-2); }
.value-item p { margin: 0; }