/* ==========================================================================
   Pixelpott – Studio-Variante
   Große breite Versalien, Handschrift-Akzente, runde Karten, Pillen-Buttons.
   Alles ist unter .pp-studio gekapselt (für den Editor wird daraus studio-editor.css erzeugt).
   ========================================================================== */

.pp-studio {
	font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
	font-weight: 500;
	letter-spacing: -.005em;
}

/* Überschriften: breit, Versalien, nicht kursiv */
.pp-studio h1, .pp-studio h2, .pp-studio .pp-h2, .pp-studio .pp-page__title, .pp-studio .pp-service-page__title, .pp-studio .pp-project-page__title,
.pp-studio .pp-hero__title, .pp-studio .wp-block-pixelpott-section h2.wp-block-heading, .pp-studio .wp-block-pixelpott-highlights h2.wp-block-heading,
.pp-studio .pp-parallax h2.wp-block-heading, .pp-studio .pp-hero__copy h1.wp-block-heading {
	font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-style: normal; font-weight: 850; font-stretch: 125%;
	text-transform: uppercase; letter-spacing: -.005em; line-height: .96;
}
.pp-studio h3, .pp-studio .pp-service__title, .pp-studio .pp-step__title, .pp-studio .pp-benefit__title, .pp-studio .pp-work__title,
.pp-studio .pp-panel h3.wp-block-heading, .pp-studio .wp-block-pixelpott-section h3.wp-block-heading, .pp-studio .pp-approach__item h3,
.pp-studio .pp-process__cta-title, .pp-studio .pp-footer__heading, .pp-studio .pp-proj__title {
	font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-style: normal; font-stretch: 118%; text-transform: uppercase; letter-spacing: 0;
}
.pp-studio .pp-hero__line--outline, .pp-studio .pp-outline { -webkit-text-stroke-width: 1.6px; }
.pp-studio h1 .pp-script, .pp-studio h2 .pp-script { display: block; width: fit-content; margin: .06em 0 .06em; font-size: .88em; }
.pp-studio .pp-section--center h2 .pp-script, .pp-studio .has-text-align-center .pp-script, .pp-studio .pp-stack__intro h2 .pp-script, .pp-studio .pp-shero__copy h1 .pp-script { margin-inline: auto; }
.pp-studio p .pp-script { display: inline-block; font-size: 1.25em; }
.pp-studio .pp-kicker { font-family: "Manrope", sans-serif; font-weight: 700; letter-spacing: .02em; }
.pp-studio .pp-accent { text-decoration: none; }

/* Fließtext etwas luftiger */
.pp-studio .pp-flow > p, .pp-studio .pp-prose, .pp-studio .pp-hero__text { font-weight: 500; }

/* Buttons: Pillen mit Pfeil */
.pp-studio .pp-btn, .pp-studio .wp-block-button .wp-block-button__link {
	font-family: "Manrope", sans-serif; font-weight: 700; font-stretch: 100%; letter-spacing: 0; gap: .6em; padding-inline: 26px;
}
.pp-studio .pp-btn--primary::after, .pp-studio .wp-block-button:not(.is-style-outline) .wp-block-button__link::after,
.pp-studio .pp-form__submit::after {
	content: "→"; display: inline-block; transition: transform .2s ease; font-weight: 700;
}
.pp-studio .pp-btn--primary:hover::after, .pp-studio .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::after { transform: translateX(4px); }
.pp-studio .pp-nav__cta::after { content: none; }

/* Kopfbereich: schlank */
.pp-studio .pp-nav__list a { font-family: "Manrope", sans-serif; font-weight: 700; font-size: .95rem; }
.pp-studio .pp-header { background: rgba(16, 25, 28, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Karten, Kästen, Formular: rund und weich */
.pp-studio .pp-benefit, .pp-studio .pp-panel, .pp-studio .pp-form, .pp-studio .pp-process__cta { box-shadow: none; }
.pp-studio .pp-benefits--bento .pp-benefit { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }

/* Häufige Fragen als Pillen mit X */
.pp-studio .pp-faq__list { border: 0; display: grid; gap: 10px; }
.pp-studio .pp-faq__item { border: 0; border-radius: 26px; background: rgba(16, 25, 28, .06); transition: background-color .2s ease; }
.pp-studio .pp-section:not(.pp-section--light) .pp-faq__item { background: rgba(230, 230, 230, .07); }
.pp-studio .pp-faq__item summary { padding: 16px 16px 16px 26px; font-family: "Archivo", sans-serif; font-stretch: 112%; font-weight: 800; }
.pp-studio .pp-faq__item summary::after {
	width: 30px; height: 30px; border: 0; border-radius: 50%; transform: none;
	background: var(--pp-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%2310191C' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 18px no-repeat;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.pp-studio .pp-faq__item[open] summary::after { transform: rotate(135deg); }
.pp-studio .pp-faq__item.is-closing summary::after { transform: none; }
.pp-studio .pp-faq__answer { padding: 0 60px 22px 26px; }

/* Ablauf: Rauten werden zu X-Markern */
.pp-studio .pp-step__num::before { border-radius: 8px; }

/* Leistungsliste: große Versalien, Hover mit X */
.pp-studio .pp-service__title { font-weight: 850; font-stretch: 125%; }

/* Footer */
.pp-studio .pp-footer__heading { color: var(--pp-teal); font-size: .85rem; letter-spacing: .04em; }

/* Unterseiten */
.pp-studio .pp-service-page__title { font-size: calc(clamp(2.4rem, 5.6vw, 5rem) * var(--pp-hs, 1)); }
.pp-studio .pp-project-page__title { font-size: calc(clamp(2.1rem, 4.8vw, 4.25rem) * var(--pp-hs, 1)); line-height: 1; }
.pp-studio .pp-proj__title { font-weight: 850; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.15; }