/*
Theme Name: ATO Treuhand
Template: clicdesign-theme
Author: clicdesign
Description: Child-Theme fuer die ATO Treuhand AG, Bern. Branding, Tokens und projektspezifisches CSS. Komponenten liegen im Framework, nicht hier.
Version: 0.2.0
Requires Clicdesign: 0.39.0
License: proprietaer
Text Domain: ato-treuhand
*/

/*
 * "Requires Clicdesign" ist der Vertrag mit dem Parent-Theme.
 *
 * Er nennt die aelteste Theme-Version, mit der dieses Child stimmt.
 * bin/release.sh prueft ihn beim Packen und bricht ab, wenn das
 * mitgepackte Theme aelter ist. Wer die Zahl erhoeht, sagt damit:
 * Dieses Child braucht etwas, das es in aelteren Theme-Versionen
 * nicht gibt.
 */

/*
 * Projektspezifisches CSS.
 *
 * Farben, Schriften und Abstaende gehoeren nach theme.json,
 * nicht hierhin (CD-09). Diese Datei ist fuer das, was sich
 * mit Tokens allein nicht ausdruecken laesst.
 *
 * Die Rundung steht in theme.json unter settings.custom.radius und
 * ist fuer ATO auf 0px gesetzt. Das ist eine Designentscheidung, keine
 * Vorgabe des Frameworks: Das Logo ist streng geometrisch gezeichnet —
 * das A ohne Querbalken, das O als offener Ring, die Trennlinie als
 * gerade Haarlinie. Eine Rundung an Karten und Knoepfen wuerde dieser
 * Zeichnung widersprechen. Das Briefing verlangt ausserdem ausdruecklich
 * "keine modischen Effekte".
 */

/* ------------------------------------------------------------------ *
 * Silbentrennung in Ueberschriften
 *
 * Deutsche Komposita sind lang. Ohne Trennregel kappt der Browser
 * mitten im Wort — "Vertrauenssac / he" — statt zu trennen.
 *
 * Das Netz, nicht die Loesung: Der Fall, der es sichtbar gemacht hat,
 * war eine zu grosse Ueberschrift in einer schmalen Spalte, und der
 * ist seit Theme 0.39.0 an der Ursache behoben. Ein langes Wort in
 * einer engen Zeile bleibt trotzdem moeglich, und dann trennt es hier
 * sauber statt zu kappen.
 *
 * hyphenate-limit-chars haelt die Trennung zurueck, wo sie nicht noetig
 * ist: erst ab zehn Zeichen Wortlaenge, mindestens fuenf davor und vier
 * danach. Kurze Woerter werden nie getrennt, und in einer Zeile, die
 * ohnehin passt, trennt der Browser gar nicht.
 *
 * Steht hier und nicht in theme.json, weil sich eine Trennregel nicht
 * als Token ausdruecken laesst (CD-09, letzter Satz).
 * ------------------------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 10 5 4;
}

/* ------------------------------------------------------------------ *
 * Team-Portraits im Format der Vorlage
 *
 * Das Theme setzt Team-Bilder auf 3:4 und schneidet mit object-fit
 * zurecht — richtig fuer hochformatige Portraits. Die Bilder der ATO
 * sind quer: 400 x 292. Auf 3:4 gezwungen wurden ihnen links und
 * rechts je rund ein Drittel abgeschnitten.
 *
 * Hier steht darum das Format der Vorlage, 400 zu 292. Nicht "auto":
 * Die Karte ist ein Raster und streckt ein Bild ohne festes Verhaeltnis
 * ueber die ganze Zeilenhoehe — im Versuch auf 1500px, entsprechend
 * verzerrt. Ein Bild in anderem Format braucht hier die neue Zahl.
 * ------------------------------------------------------------------ */

.cd-sammlung--team:not(.is-style-cd-zeilen) .cd-sammlung__bild img {
	aspect-ratio: 400 / 292;
	height: auto;
	object-fit: cover;
}

/* ------------------------------------------------------------------ *
 * Ausbildungen im Team, Zeile fuer Zeile
 *
 * Auf ato.ch steht unter jedem Namen eine Liste: Abschluesse, Zulassung,
 * Funktion, dazu das Eintrittsjahr. Diese Angaben sind im Treuhand-
 * geschaeft der Vertrauensanker — sie gehoeren vollstaendig auf die
 * Seite und nicht zu einer Zeile verkettet.
 *
 * Das Funktionsfeld ist einzeilig und wird mit esc_html ausgegeben, also
 * ohne Markup. Ein Zeilenumbruch im Wert bleibt darin aber erhalten;
 * pre-line macht ihn sichtbar, ohne dass der Block ein zweites Feld
 * braucht.
 * ------------------------------------------------------------------ */

.cd-sammlung--team .cd-sammlung__funktion {
	white-space: pre-line;
}

/* ------------------------------------------------------------------ *
 * Rubriktitel
 *
 * "Antworten auf häufige Fragen" und "Das könnte Sie auch
 * interessieren" benennen eine Rubrik, sie sagen nichts über den
 * Inhalt. In der vollen H2-Groesse von 72px wiegen sie so schwer wie
 * "Was wir für Sie übernehmen" — und ziehen Aufmerksamkeit auf einen
 * Servicetitel statt auf die Leistung.
 *
 * Semantisch bleiben es h2: Sie eröffnen einen Abschnitt. Nur das
 * Gewicht sinkt.
 * ------------------------------------------------------------------ */

.cd-rubrik {
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1.2;
}

/* ------------------------------------------------------------------ *
 * Ansprechperson als dunkler Abschnitt
 *
 * Auf einer Leistungsseite folgen sonst vier Abschnitte in derselben
 * Listenoptik aufeinander: was wir übernehmen, wie wir vorgehen, die
 * Fragen, die Querverweise. Die Ansprechperson war der fünfte — und
 * damit die fünfte Zeile in einer Reihe von Zeilen.
 *
 * Sie steht jetzt als dunkles Band über die volle Breite zwischen den
 * Leistungen und den Fragen. Das unterbricht den Rhythmus an der
 * Stelle, an der die Seite von "was wir tun" zu "was Sie wissen
 * wollen" wechselt — und gibt der Person das Gewicht, das der Satz
 * "Treuhand ist Vertrauenssache" verspricht.
 * ------------------------------------------------------------------ */

.cd-person {
	margin-block: var(--cd-space-lg);
	padding-block: var(--cd-space-md);
}

.cd-person .cd-person__raster {
	align-items: center;
	gap: var(--cd-space-md);
	margin-bottom: 0;
}

.cd-person img {
	width: 100%;
	max-width: 220px;
	height: auto;
	display: block;
}

.cd-person h2 {
	margin-bottom: var(--cd-space-xs);
}

.cd-person .cd-person__rolle {
	color: rgba(255, 255, 255, .72);
	margin-bottom: var(--cd-space-xs);
}

.cd-person .cd-person__kontakt a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: .2em;
}

@media (max-width: 780px) {

	.cd-person img {
		max-width: 140px;
	}
}