/*
Theme Name: Agentur Struktur
Description: Child-Theme von Twenty Twenty-Five. Seitenaufbau einer Agentur-Website (Cases, Angebot, Team, Stories) – Farben und Schriften unter Design › Editor › Stile.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: agentur-struktur
*/

/* ==========================================================================
   Variablen – alle Farben kommen aus der Palette (Design › Editor › Stile › Farben)
   ========================================================================== */
:root {
	--as-dark: var(--wp--preset--color--contrast);
	--as-light: var(--wp--preset--color--base);
	--as-accent: var(--wp--preset--color--accent-1);
	--as-accent-dark: var(--wp--preset--color--accent-6);
	--as-line: var(--wp--preset--color--accent-2);
	--as-grey: var(--wp--preset--color--accent-3);
	--as-soft: var(--wp--preset--color--accent-4);
	--as-surface: var(--wp--preset--color--accent-5);
	--as-gap: 30px;
	--as-row-gap: 60px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.as-header {
	padding: 23px 27px;
	align-items: flex-start;
}
.as-header .as-brand {
	gap: 40px;
	align-items: flex-start;
}
.as-header .wp-block-site-title,
.as-footer .wp-block-site-title {
	font-size: 27px;
	font-weight: 800;
	line-height: 24px;
	max-width: 7em;
	margin: 0;
}
.as-header .wp-block-site-title a,
.as-footer .wp-block-site-title a {
	text-decoration: none;
	color: inherit;
}
.as-claim {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}
.as-header .wp-block-navigation {
	font-size: 1.125rem;
	font-weight: 700;
	gap: 28px;
}
.as-header .wp-block-navigation a {
	text-decoration: none;
}
.as-header .wp-block-navigation a:hover {
	color: var(--as-accent-dark);
}
@media (max-width: 781px) {
	.as-claim { display: none; }
	.as-header { padding: 20px 16px; }
}

/* ==========================================================================
   Abschnitte & Spalten
   ========================================================================== */
.as-section {
	padding-block: 60px 80px;
}
.as-section > .wp-block-heading:first-child {
	margin-bottom: 45px;
}
.as-intro {
	padding-block: 80px 60px;
}
.as-intro .wp-block-heading,
.as-intro-text {
	color: var(--as-grey);
}
.as-pagetitle {
	padding-block: 80px 20px;
}
.as-pagetitle h1 {
	margin: 0;
}
.as-lead {
	font-weight: 700;
}
.as-more {
	margin-top: 90px;
}
@media (max-width: 781px) {
	.as-section { padding-block: 36px 48px; }
	.as-intro, .as-pagetitle { padding-block: 48px 24px; }
	.as-more { margin-top: 48px; }
}

/* Schmale, leicht eingerückte Textspalte (wie im Original) */
@media (min-width: 1024px) {
	.as-offset > :not(.alignwide):not(.alignfull) {
		margin-left: max(0px, calc(50% - 400px)) !important;
		margin-right: auto !important;
	}
}

/* Zurück-Link */
.as-back {
	padding-top: 20px;
	font-weight: 700;
}
.as-back a {
	text-decoration: none;
}
.as-back a::before {
	content: "← ";
}

/* Hero / Bildband (Cover-Blöcke – Bild im Editor einsetzen) */
.as-hero {
	min-height: 90vh !important;
}
.as-band {
	min-height: 420px !important;
}
.as-hero p,
.as-band p {
	color: var(--as-grey) !important;
}
.as-video .wp-block-video:not(:has(video)) {
	aspect-ratio: 16 / 9;
	background: var(--as-surface);
	margin: 0;
}
/* Platzhalter für fehlendes Beitragsbild auf Detailseiten */
.as-top-hero:not(:has(.wp-block-post-featured-image))::before,
.as-top-portrait:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	display: block;
	aspect-ratio: 21 / 9;
	background: var(--as-surface);
	margin-bottom: 20px;
}
.as-top-portrait:not(:has(.wp-block-post-featured-image))::before {
	aspect-ratio: 1 / 1;
	max-width: 50%;
}
@media (max-width: 781px) {
	.as-top-portrait:not(:has(.wp-block-post-featured-image))::before { max-width: 100%; }
}
.as-hero-img img,
.as-hero-img::before {
	aspect-ratio: 21 / 9 !important;
}

/* Platzhalter-Flächen für noch fehlende Bilder */
.as-slot {
	background: var(--as-surface);
	aspect-ratio: 3 / 2;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.as-slot .wp-block-image,
.as-slot img {
	margin: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.as-slot--wide {
	aspect-ratio: 4 / 3;
}
.as-slot--wide img {
	object-fit: cover;
}
.as-slot--map {
	aspect-ratio: auto;
	min-height: 450px;
}

/* ==========================================================================
   Karten-Raster (Query-Loop) – Muster wie im Original
   ========================================================================== */
.as-grid .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--as-row-gap) var(--as-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.as-grid .wp-block-post-template > li {
	grid-column: span 4;
	margin: 0 !important;
	--ratio: 10 / 7;
}

/* Quadratische Bilder (Stories, Team) */
.as-grid--square .wp-block-post-template > li { --ratio: 1 / 1; }

/* 12 | 4-4-4 – erste Karte gross */
.as-grid--feature .wp-block-post-template > li:nth-child(1) { grid-column: span 12; --ratio: 16 / 9; }

/* 8-4 | 4-4-4 | 12 */
.as-grid--mix .wp-block-post-template > li:nth-child(6n + 1) { grid-column: span 8; --ratio: 3 / 1; }
.as-grid--mix .wp-block-post-template > li:nth-child(6n) { grid-column: span 12; --ratio: 16 / 9; }
.as-grid--mix.as-grid--square .wp-block-post-template > li:nth-child(6n + 1) { --ratio: 2.08 / 1; }

/* 12 | 4-4-4 | 8-4 */
.as-grid--mixb .wp-block-post-template > li:nth-child(6n + 1) { grid-column: span 12; --ratio: 16 / 9; }
.as-grid--mixb .wp-block-post-template > li:nth-child(6n + 5) { grid-column: span 8; --ratio: 3 / 1; }

/* Team: 4-4-4 | 8-4, jede zweite Karte rund */
.as-grid--team .wp-block-post-template > li { --ratio: 1 / 1; }
.as-grid--team .wp-block-post-template > li:nth-child(5n + 4) { grid-column: span 8; --ratio: 2.08 / 1; }
.as-grid--team .wp-block-post-template > li:nth-child(5n + 2) { --radius: 50%; }
.as-grid--team .as-card { text-align: center; }

@media (min-width: 782px) and (max-width: 1023px) {
	.as-grid .wp-block-post-template > li { grid-column: span 6 !important; }
	.as-grid--feature .wp-block-post-template > li:nth-child(1),
	.as-grid--mix .wp-block-post-template > li:nth-child(6n),
	.as-grid--mixb .wp-block-post-template > li:nth-child(6n + 1) { grid-column: span 12 !important; }
}
@media (max-width: 781px) {
	.as-grid .wp-block-post-template { gap: 40px; }
	.as-grid .wp-block-post-template > li { grid-column: 1 / -1 !important; --ratio: 10 / 7; }
	.as-grid--square .wp-block-post-template > li,
	.as-grid--team .wp-block-post-template > li { --ratio: 1 / 1; }
}

/* Karte */
.as-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.as-card > * {
	margin: 0 !important;
}
.as-card .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--radius, 0);
}
.as-card .wp-block-post-featured-image img {
	aspect-ratio: var(--ratio) !important;
	width: 100% !important;
	height: auto !important;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease, filter 0.6s ease;
}
/* Platzhalter, solange kein Beitragsbild gesetzt ist */
.as-card:not(:has(.wp-block-post-featured-image))::before,
.as-hero-img:not(:has(img))::before {
	content: "";
	display: block;
	aspect-ratio: var(--ratio, 10 / 7);
	background: var(--as-surface);
	border-radius: var(--radius, 0);
}
.as-card:hover .wp-block-post-featured-image img {
	transform: scale(0.97);
	filter: saturate(0.75);
}
.as-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
}
.as-card .wp-block-post-title a {
	text-decoration: none;
	color: inherit;
	transition: color 0.3s;
}
.as-card:hover .wp-block-post-title a {
	color: var(--as-accent-dark);
}
.as-card .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Tags */
.as-tags {
	font-size: 12px;
	line-height: 1.4;
}
.as-tags a,
.as-tags .as-tag,
.as-card .wp-block-post-excerpt.as-tags p {
	display: inline-block;
	background: var(--as-line);
	color: var(--as-dark);
	padding: 0 8px 3px;
	margin: 0 6px 6px 0;
	text-decoration: none;
	transition: background 0.6s, color 0.6s;
}
.as-tags .wp-block-post-terms__separator {
	display: none;
}
.as-card:hover .as-tags a,
.as-card:hover .as-tags p {
	background: var(--as-accent);
}

/* ==========================================================================
   Leistungs-Liste (Startseite)
   ========================================================================== */
.as-services .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 var(--as-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--as-line);
}
.as-services .wp-block-post-template > li {
	margin: 0 !important;
	border-bottom: 1px solid var(--as-line);
}
.as-service {
	display: flex;
	align-items: center;
	gap: 15px;
	min-height: 79px;
	padding: 9px 0 10px 10px;
}
.as-service > * {
	margin: 0 !important;
}
.as-service .wp-block-post-featured-image,
.as-service:not(:has(.wp-block-post-featured-image))::before {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--as-surface);
}
.as-service:not(:has(.wp-block-post-featured-image))::before {
	content: "";
}
.as-service .wp-block-post-featured-image img {
	width: 60px !important;
	height: 60px !important;
	object-fit: contain;
	padding: 14px;
}
.as-service .wp-block-post-title {
	font-size: 1.125rem;
}
.as-service .wp-block-post-title a {
	text-decoration: none;
}
.as-service:hover .wp-block-post-featured-image,
.as-service:hover::before {
	background: var(--as-accent) !important;
}
@media (max-width: 1023px) {
	.as-services .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
	.as-services .wp-block-post-template { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Angebot-Kacheln (Text- und Icon-Variante im Wechsel)
   ========================================================================== */
.as-tiles .wp-block-post-template {
	row-gap: var(--as-gap);
}
.as-tiles .wp-block-post-template > li {
	--ratio: 1 / 1;
}
.as-tile {
	aspect-ratio: 1 / 1;
	padding: 30px;
	border: 1px solid var(--as-line);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 16px;
	transition: background 0.3s;
}
.as-tile > * {
	margin: 0 !important;
}
.as-tile .wp-block-post-title a {
	text-decoration: none;
}
.as-tile .wp-block-post-featured-image img {
	width: 80px !important;
	height: 80px !important;
	object-fit: contain;
}
.as-tile:not(:has(.wp-block-post-featured-image))::before {
	content: "";
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--as-surface);
}
.as-tiles li:nth-child(3n + 1) .as-tile {
	background: var(--as-surface);
	align-items: flex-start;
	text-align: left;
}
.as-tiles li:nth-child(3n + 1) .as-tile::before,
.as-tiles li:nth-child(3n + 1) .wp-block-post-featured-image {
	display: none;
}
.as-tiles li:not(:nth-child(3n + 1)) .wp-block-post-excerpt {
	display: none;
}
.as-tile:hover {
	background: var(--as-accent) !important;
}
@media (max-width: 781px) {
	.as-tile { aspect-ratio: auto; min-height: 260px; }
}

/* Kundenlogos */
.as-logos {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.as-logos > * {
	margin: 0 !important;
}
.as-logos img {
	filter: grayscale(1);
}
@media (max-width: 781px) {
	.as-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   Kategorie-Filter
   ========================================================================== */
.as-filter-label {
	font-weight: 700;
	margin-bottom: 10px;
}
.wp-block-agentur-struktur-term-filter ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	font-weight: 700;
}
.wp-block-agentur-struktur-term-filter a {
	text-decoration: none;
}
.wp-block-agentur-struktur-term-filter a.is-active {
	text-decoration: underline;
	text-decoration-color: var(--as-accent);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

/* ==========================================================================
   Detailseiten
   ========================================================================== */
.as-meta {
	gap: 16px;
	align-items: center;
	font-size: 0.875rem;
}
.as-meta > * {
	margin: 0 !important;
}
.as-contact,
.as-authors {
	border-top: 1px solid var(--as-line);
	padding-top: 20px;
}
.as-contact p {
	margin-block: 4px;
}
.as-authors .wp-block-post-author {
	align-items: center;
}
.as-authors .avatar {
	border-radius: 50%;
}
.as-portrait {
	max-width: 50%;
}
.as-portrait img,
.as-portrait::before {
	aspect-ratio: 1 / 1 !important;
}
.as-portrait:not(:has(img))::before {
	content: "";
	display: block;
	background: var(--as-surface);
}
@media (max-width: 781px) {
	.as-portrait { max-width: 100%; }
}
.as-gallery-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--as-gap);
}
.as-gallery-grid > * {
	margin: 0 !important;
}
@media (max-width: 781px) {
	.as-gallery-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Formulare (Platzhalter – durch Formular-Plugin ersetzen)
   ========================================================================== */
.as-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.as-form .full {
	grid-column: 1 / -1;
}
.as-form label,
.as-nl label {
	display: block;
	font-weight: 700;
	margin-bottom: 6px;
}
.as-form input,
.as-form textarea,
.as-nl input {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--as-line);
	font: inherit;
	box-sizing: border-box;
}
.as-form button,
.as-nl button {
	justify-self: start;
	padding: 14px 32px;
	border: 0;
	border-radius: 40px;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	background: var(--as-dark);
	color: var(--as-light);
}
.as-nl form {
	border-radius: 15px;
	padding: 30px 40px;
	display: flex;
	gap: 20px;
	align-items: flex-end;
	flex-wrap: wrap;
	background: linear-gradient(152deg, var(--as-soft), var(--as-accent-dark));
}
.as-nl .field {
	flex: 1 1 260px;
}
.as-nl input {
	border: 0;
}
@media (max-width: 781px) {
	.as-form { grid-template-columns: 1fr; }
	.as-nl form { padding: 24px 20px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.as-footer {
	background: var(--as-dark);
	color: var(--as-light);
	padding: 55px 27px 85px;
	margin-top: 0 !important;
	font-size: 0.9375rem;
}
.as-footer a {
	color: var(--as-line);
	text-decoration: none;
}
.as-footer .wp-block-site-title a {
	color: var(--as-light);
}
.as-footer .wp-block-social-links .wp-social-link {
	background: transparent !important;
	color: var(--as-line) !important;
}
.as-footer .wp-block-social-links .wp-social-link:hover {
	color: var(--as-accent) !important;
}
.as-footer a:hover {
	color: var(--as-accent);
}
.as-footer .as-footer-label {
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 6px;
}
.as-footer-nav {
	list-style: none;
	padding: 0;
	margin: 0;
	font-weight: 600;
}
.as-footer-nav li {
	margin: 0 0 6px;
}
.as-footer-links {
	gap: 24px;
	text-align: right;
}
.as-footer .as-members {
	display: flex !important;
	flex-wrap: wrap;
	gap: 16px 24px;
}
.as-footer .as-members .as-slot {
	width: 110px;
	aspect-ratio: 5 / 2;
	background: rgba(255, 255, 255, 0.12);
}
.as-footer .wp-block-social-links {
	gap: 8px;
}
@media (max-width: 781px) {
	.as-footer { padding: 40px 16px 50px; }
	.as-footer-links { text-align: left; }
}