/*
 * Malbuch — Darstellung.
 *
 * Diese Datei ist zum Anpassen da: die Werte unter "Stellschrauben" aendern
 * und fertig. Danach im style.css-Header die Theme-Version hochzaehlen, sonst
 * liefert der Browser die alte Fassung aus dem Cache.
 *
 * Achtung beim Cursor: Ankerpunkt (die zwei Zahlen) und Icon-Geometrie muessen
 * zusammenpassen. Aenderst du nur die Zahlen, zeichnet es versetzt zur
 * sichtbaren Spitze. Die Icons liegen in img/.
 */

.mk-malbuch {
	/* --- Stellschrauben --- */
	/* Papiertextur. Dieselbe Datei nutzt der Server fuer die gespeicherten
	   Bilder (siehe init.php), damit beides gleich aussieht. Als sRGB ohne
	   Farbprofil speichern: Browser wenden ein Profil an, der Server nicht.
	   --mk-bg steht drunter, bis das Bild geladen ist. */
	--mk-papier: url( "img/papier.jpg" );
	--mk-bg: #f4f4f2;
	--mk-akzent: #38ffe4;  /* Werkzeug-Labels, Galerie-Link, Erfolgsmeldung */
	--mk-text: #01001C;    /* Titelzeile oben links, Einwilligung */

	/* Die Farbe, mit der gezeichnet wird, steht NICHT hier: sie geht direkt ans
	   Canvas und laesst sich per CSS nicht setzen. Sie haengt am Shortcode —
	   [malbuch stift="#01001c"] — und ist ohne Angabe #01001c. */
	--mk-abstand: clamp( 20px, 4vw, 32px );
	--mk-schrift: clamp( 0.8rem, 1.6vw, 0.95rem );
	--mk-senden-bg: #fff;
	--mk-senden-text: #01001C;
	--mk-radius: 4px;

	/* Werkzeug-Knoepfe oben rechts */
	--mk-knopf: 56px;
	--mk-knopf-abstand: 24px;
	--mk-knopf-radius: 4px;
	--mk-knopf-icon: 36px;
	--mk-knopf-bg: #0900ff;              /* Grundzustand */
	--mk-knopf-bg-aktiv: var(--mk-akzent); /* aktiv und bei Hover */
	--mk-knopf-farbe: #fff;              /* Icon im Grundzustand */
	--mk-knopf-farbe-aktiv: var(--mk-knopf-bg); /* Icon aktiv und bei Hover */

	/* Die zwei Zahlen hinter der URL sind der Ankerpunkt: Pixel von oben links.
	   Pinsel laeuft exakt bei 0/29 spitz zu, die Radierkante liegt bei 12/30. */
	--mk-cursor-stift: url( "img/cursor-pinsel.svg" ) 0 29;
	--mk-cursor-radierer: url( "img/cursor-radierer.svg" ) 12 30;

	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
	background: var(--mk-bg) var(--mk-papier) center / cover no-repeat;
	overflow: hidden;
	font-family: "Archivo", sans-serif;
	-webkit-user-select: none;
	user-select: none;
}

.mk-malbuch .mk-malbuch__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	/* Ohne touch-action scrollt das Handy die Seite statt zu zeichnen. */
	touch-action: none;
	/* crosshair faengt ab, wenn der Browser SVG-Cursor ablehnt. */
	cursor: var(--mk-cursor-stift), crosshair;
}

.mk-malbuch[data-mk-aktiv="radierer"] .mk-malbuch__canvas {
	cursor: var(--mk-cursor-radierer), crosshair;
}

.mk-malbuch .mk-malbuch__titel,
.mk-malbuch .mk-malbuch__werkzeuge,
.mk-malbuch .mk-malbuch__fuss,
.mk-malbuch .mk-malbuch__galerie-link {
	position: absolute;
	z-index: 2;
	margin: 0;
	font-size: var(--mk-schrift);
	line-height: 1.3;
}

.mk-malbuch .mk-malbuch__titel {
	font-family: 'Archivo', sans-serif;
	font-weight: 900;
	top: var(--mk-abstand);
	left: var(--mk-abstand);
	max-width: 55%;
	color: var(--mk-text);
	font-size: 32px;
	/* Sonst faengt die Beschriftung die Striche ab. */
	pointer-events: none;
}

.mk-malbuch .mk-malbuch__titel.is-erfolg {
	color: var(--mk-akzent);
}

.mk-malbuch .mk-malbuch__titel.is-fehler {
	color: #ff6b6b;
}

.mk-malbuch .mk-malbuch__titel.is-warnung {
	opacity: 0.6;
}

.mk-malbuch .mk-malbuch__werkzeuge {
	top: var(--mk-abstand);
	right: var(--mk-abstand);
	display: flex;
	gap: var(--mk-knopf-abstand);
}

/* :focus steht mit drin, weil Elementor button:focus eckig macht — ein
   geklickter Knopf behaelt den Fokus. */
.mk-malbuch .mk-malbuch__werkzeug,
.mk-malbuch .mk-malbuch__werkzeug:focus {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mk-knopf);
	height: var(--mk-knopf);
	padding: 0;
	border: 0;
	border-radius: var(--mk-knopf-radius);
	background: var(--mk-knopf-bg);
	color: var(--mk-knopf-farbe);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.mk-malbuch .mk-malbuch__icon {
	display: block;
	width: var(--mk-knopf-icon);
	height: var(--mk-knopf-icon);
}

/* Hover und Aktiv sehen gleich aus — Hover zeigt damit vorab, was ein Klick
   bewirkt. Radius steht hier nochmal, weil Elementor button:hover eckig macht. */
.mk-malbuch .mk-malbuch__werkzeug:hover,
.mk-malbuch .mk-malbuch__werkzeug:focus-visible,
.mk-malbuch .mk-malbuch__werkzeug.is-aktiv {
	border-radius: var(--mk-knopf-radius);
	background: var(--mk-knopf-bg-aktiv);
	color: var(--mk-knopf-farbe-aktiv);
}

/* Unten links: Einwilligung ueber dem Senden-Button. */
.mk-malbuch .mk-malbuch__fuss {
	bottom: var(--mk-abstand);
	left: var(--mk-abstand);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: calc( 100% - 2 * var(--mk-abstand) );
}

.mk-malbuch .mk-malbuch__einwilligung {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	max-width: 32em;
	margin: 0;
	color: var(--mk-text);
	font-size: var(--mk-schrift);
	line-height: 1.4;
	cursor: pointer;
}

.mk-malbuch .mk-malbuch__einwilligung input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 0.1em 0 0;
	accent-color: var(--mk-akzent);
	cursor: pointer;
}

.mk-malbuch .mk-malbuch__einwilligung a {
	color: var(--mk-senden-text);
	text-decoration: underline;
}

/* :hover und :focus mit drin, sonst setzt Elementor dort eigene Farben und
   eckige Ecken. */
.mk-malbuch .mk-malbuch__senden,
.mk-malbuch .mk-malbuch__senden:hover,
.mk-malbuch .mk-malbuch__senden:focus {
	box-sizing: border-box;
	margin: 0;
	border: 0;
	border-radius: var(--mk-radius);
	background: var(--mk-senden-bg);
	background-color: #0900FF;
	font-family: "IBM Plex Mono", Sans-serif;
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.1em;
	letter-spacing: 0.05em;
	color: #FFFFFF;
	border-radius: 4px 4px 4px 4px;
	padding: 22px 42px 22px 42px;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform 0.15s ease, opacity 0.15s ease;
}

.mk-malbuch .mk-malbuch__senden:hover:not( :disabled ),
.mk-malbuch .mk-malbuch__senden:focus-visible:not( :disabled ) {
	transform: translateY( -2px );
	background-color: var(--mk-akzent);
	color: #0900FF;
}

.mk-malbuch .mk-malbuch__senden:disabled {
	opacity: 0.35;
	cursor: default;
}

.mk-malbuch .mk-malbuch__galerie-link {
	right: var(--mk-abstand);
	bottom: var(--mk-abstand);
	color: var(--mk-akzent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.mk-malbuch .mk-malbuch__galerie-link:hover,
.mk-malbuch .mk-malbuch__galerie-link:focus-visible {
	border-bottom-color: currentColor;
}

.mk-galerie {
	--mk-spalten: 3;

	display: grid;
	grid-template-columns: repeat( var(--mk-spalten), minmax( 0, 1fr ) );
	gap: clamp( 0.5rem, 2vw, 1.5rem );
}

.mk-galerie__item {
	margin: 0;
	background: #01001C;
	aspect-ratio: 1 / 1;
}

.mk-galerie__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@media ( max-width: 767px ) {
	.mk-galerie {
		grid-template-columns: repeat( min( var(--mk-spalten), 2 ), minmax( 0, 1fr ) );
	}


	/* Hochformat 3:4, solange das JS noch nicht gelaufen ist. Danach gilt
	   data-mk-format (siehe	 unten), damit Pixel und Flaeche zusammenpassen. */
	.mk-malbuch {
		--mk-knopf: 40px;
		--mk-knopf-abstand: 6px;
		--mk-knopf-icon: 26px;

		aspect-ratio: 3 / 4;
	}

	.mk-malbuch .mk-malbuch__titel  {
		max-width: 40%;
		font-size: 20px;
	}
}

/* Das Format, das das JS tatsaechlich gesetzt hat, schlaegt die Media Query:
   Wird das Fenster mit fertigem Bild ueber die Grenze gezogen, behaelt das
   Blatt sein Format, statt die Zeichnung zu verzerren. Werte wie in init.php. */
.mk-malbuch[data-mk-format="quadrat"] {
	aspect-ratio: 800 / 800;
}

.mk-malbuch[data-mk-format="hoch"] {
	aspect-ratio: 800 / 1067;
}