/* Druckwerk - Ergaenzungen zu theme.json. Farben und Abstaende kommen aus den Presets. */

.druckwerk-spezifikation table,
table.druckwerk-spezifikation {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--wp--preset--font-family--technik);
	font-size: var(--wp--preset--font-size--klein);
}

.druckwerk-spezifikation th,
.druckwerk-spezifikation td {
	border: 0;
	text-align: left;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--wp--preset--color--leinen);
	vertical-align: top;
}

.druckwerk-spezifikation th {
	font-weight: 400;
	color: var(--wp--preset--color--grauton);
	width: 40%;
}

.druckwerk-preis {
	font-family: var(--wp--preset--font-family--technik);
	color: var(--wp--preset--color--grauton);
}

.druckwerk-anfrage {
	margin-top: var(--wp--preset--spacing--30);
}

.druckwerk-anfrage-hinweis {
	font-size: var(--wp--preset--font-size--klein);
	color: var(--wp--preset--color--grauton);
	margin-top: var(--wp--preset--spacing--10);
}

/* WooCommerce-Uebersicht an das Raster des Themes angleichen. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--gross);
	font-weight: 500;
	line-height: 1.2;
}

.woocommerce ul.products li.product img {
	border-radius: 8px;
}

/* Sichtbarer Tastaturfokus, ueberall. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--espresso);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/*
 * Papierstruktur. Stufe unter Design, Papierstruktur waehlbar.
 *
 * Verrechnet mit "overlay": hellt helle Stellen auf, dunkelt dunkle ab,
 * laesst den Farbton stehen. Kachelbreite mal baseFrequency muss
 * ganzzahlig sein (200 x 0.8 = 160), sonst entstehen Nahtlinien.
 */
body {
	background-repeat: repeat;
	background-size: 200px 200px;
	background-blend-mode: overlay;
}

body.dop-papier-aus {
	background-image: none;
}

body.dop-papier-fein {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)' opacity='0.35'/%3E%3C/svg%3E");
}

body.dop-papier-mittel {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)' opacity='0.65'/%3E%3C/svg%3E");
}

body.dop-papier-stark {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23k)' opacity='1'/%3E%3C/svg%3E");
}

/* Farbige Flaechen tragen dieselbe Struktur, sonst wirken sie wie Aufkleber. */
.has-sand-background-color {
	background-image: inherit;
	background-size: 200px 200px;
	background-blend-mode: overlay;
}

/* Zweizeilige Bildmarke, mittig, nie gestreckt. */
.dop-logo img {
	max-width: min(180px, 60vw);
	height: auto;
	display: block;
	margin-inline: auto;
}

/*
 * Textfallback fuer die Wortmarke, falls kein Logobild gesetzt ist.
 * Markup: <p class="dop-wortmarke"><span>DoP</span><span>Lab 3D</span></p>
 */
.dop-wortmarke {
	font-family: var(--wp--preset--font-family--schreib);
	color: var(--wp--preset--color--gold);
	text-align: center;
	line-height: 0.92;
	margin: 0;
}

.dop-wortmarke span {
	display: block;
}

.dop-wortmarke span:first-child {
	font-size: clamp(2.25rem, 9vw, 3.25rem);
}

.dop-wortmarke span:last-child {
	font-size: clamp(1.75rem, 7vw, 2.5rem);
	margin-top: -0.1em;
}

/* Slogan unter der Wortmarke. Bewusst in der Garamond, nicht in der
   Schreibschrift - zwei Zierschriften uebereinander entwerten sich. */
.dop-claim {
	color: var(--wp--preset--color--espresso);
	letter-spacing: 0.01em;
	margin-block-start: var(--wp--preset--spacing--10);
}

.dop-logo + .dop-claim {
	margin-block-start: 0.3rem;
}

/* Gold traegt keinen Text, nur Zierlinien. */
.dop-zierlinie {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--gold);
	opacity: 0.5;
	margin: var(--wp--preset--spacing--40) auto;
	max-width: 120px;
}

/* Einstiegstext laeuft auf der weiten Kante, bleibt aber lesbar schmal. */
.dop-einstieg > * {
	max-width: 46rem;
	margin-inline: 0;
}

/*
 * Weite Ausrichtung behaelt auch dann einen Rand, wenn das Fenster
 * schmaler ist als wideSize. Sonst kleben Karten und Tabelle am Rand.
 */
.wp-site-blocks .is-layout-constrained > .alignwide,
.wp-site-blocks .is-layout-constrained > .alignfull > .wp-block-group__inner-container > .alignwide {
	max-width: min(72rem, calc(100% - 3.5rem));
	margin-inline: auto;
}

/* Produktbezug ueber dem Formular */
.dop-bezug {
	padding: 0.6rem 0.8rem;
	background: var(--wp--preset--color--papier);
	border-left: 3px solid var(--wp--preset--color--gold);
	border-radius: 0 4px 4px 0;
	margin-bottom: var(--wp--preset--spacing--20);
}

/*
 * Navigation. Im Ruhezustand sichtbar als Menue: Bronzeton plus feine
 * goldene Linie. Ohne dauerhafte Auszeichnung liest sich die Reihe wie
 * Fliesstext, und niemand klickt darauf.
 *
 * Hoehere Gewichtung ueber .wp-site-blocks, sonst gewinnen die
 * Layout-Regeln des Navigationsblocks.
 */
.wp-site-blocks .wp-block-navigation {
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
}

.wp-site-blocks .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--akzent);
	text-decoration: none;
	padding-block: 0.2rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--gold) 55%, transparent);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.wp-site-blocks .wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-site-blocks .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--espresso);
	border-bottom-color: var(--wp--preset--color--espresso);
}

/* Aktuelle Seite kraeftiger und dauerhaft markiert. */
.wp-site-blocks .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-site-blocks .wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--espresso);
	border-bottom-width: 2px;
	border-bottom-color: var(--wp--preset--color--akzent);
}

/* Aufgeklappt auf dem Handy: Liste statt Reihe, ohne Linien. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	border-bottom: 0;
	padding-block: 0.5rem;
}