/*
Theme Name: Imobersteg Consulting
Theme URI: https://imoberstegconsulting.com
Author: Rahel (Konzept), Claude (Umsetzung)
Author URI: https://imoberstegconsulting.com
Description: Puristisches Block-Theme für eine mehrsprachige Beratungs-Website. Graustufen mit einem blauen Akzent, Helvetica LT im Theme (lizenzpflichtig), kein JavaScript im Frontend, abschaltbare Textebenen, Sicherheits-Kopfzeilen für abgeschottete Netze und integrierte SEO-Auszeichnung (hreflang, Open Graph, JSON-LD).
Version: 1.2.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: imoberstegconsulting
Tags: block-theme, one-column, blog, translation-ready, custom-colors, editor-style, wide-blocks, accessibility-ready

Theme prompted by Rahel and computed by Claude, Bern 2026.
*/

/* ---------------------------------------------------------------
   1 – Grundlagen
   --------------------------------------------------------------- */

:root {
	--imc-hairline: var( --wp--custom--hairline, 1px solid #dbdbd9 );

	/* Der einzige Farbwert der Seite. Auf Schwarz zurückstellen:
	   --imc-akzent: var( --wp--preset--color--tinte ); */
	--imc-akzent: var( --wp--preset--color--akzent );
	--imc-marginalie: var( --wp--custom--marginalie, 11rem );
}

html {
	-webkit-text-size-adjust: 100%;
	overflow-x: clip; /* verhindert Querscrollen, ohne position:sticky zu brechen */
}

img,
video,
iframe,
svg {
	max-width: 100%;
	height: auto;
}

/* Lange Adressen und Dateinamen sprengen sonst schmale Bildschirme. */
.imc-content a,
.imc-content code,
.imc-entry a {
	overflow-wrap: anywhere;
}

/* Tabellen dürfen scrollen, statt das Layout zu sprengen. */
.wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wp-block-table table {
	min-width: 32rem;
}

/* Platzhalter statt Gravatar. */
.imc-avatar {
	display: inline-block;
	background: var( --wp--preset--color--kreide );
}

body {
	font-synthesis: style; /* kein gefälschtes Fett, abgeleitetes Kursiv ist vertretbar */
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var( --imc-akzent );
	color: var( --wp--preset--color--papier );
}

:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 2px solid var( --imc-akzent );
	outline-offset: 3px;
}

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: text-decoration-thickness 0.15s ease;
}

a:hover,
a:focus-visible {
	text-decoration-thickness: 2px;
}

/* Trennlinien gibt es nicht. Getrennt wird durch Abstand. */
hr,
.wp-block-separator {
	border: 0;
	height: var( --wp--preset--spacing--50 );
	opacity: 1;
}

/* Lange Wörter – im Deutschen unvermeidlich. */
h1, h2, h3, h4,
.wp-block-post-title {
	hyphens: auto;
	overflow-wrap: break-word;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* Helvetica LT liegt nur im Normalschnitt vor. Fetter Text greift deshalb
   auf den Fettschnitt des Geräts zurück: auf macOS echte Helvetica Bold,
   sonst Arial Bold – metrisch nahezu deckungsgleich. Besser als ein vom
   Browser verdicktes Grau, das man einer Grotesk sofort ansieht. */
strong,
b,
th,
.wp-block-site-title,
.wp-block-site-title a,
.wp-block-post-comments-form label {
	font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
	font-weight: 700;
}

/* ---------------------------------------------------------------
   2 – Marginalien, Daten, Kürzel
   Eine einzige Schrift für alles: Unterschieden wird über Grad,
   Sperrung und Farbe, nicht über eine zweite Familie.
   --------------------------------------------------------------- */

.imc-label,
.imc-eyebrow,
.imc-postmeta,
.imc-meta,
.imc-langs {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--xs );
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	color: var( --wp--preset--color--graphit );
}

.imc-label {
	margin: 0;
}

.imc-eyebrow {
	margin: 0 0 var( --wp--preset--spacing--30 );
}

/* Sicherer Bereich auf Geräten mit abgerundeten Ecken. */
.wp-site-blocks {
	padding-left: max( var( --wp--style--root--padding-left, 0px ), env( safe-area-inset-left ) );
	padding-right: max( var( --wp--style--root--padding-right, 0px ), env( safe-area-inset-right ) );
}

/* ---------------------------------------------------------------
   3 – Kopf und Sprachwechsel
   --------------------------------------------------------------- */

.imc-header {
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	padding-block: 2rem 0;
	border-bottom: var( --imc-hairline );
}

.imc-header__row {
	align-items: flex-end;
	gap: 1rem 2.5rem;
}

/* Der Sprachwechsel ist die Linie: drei Segmente auf der Haarlinie,
   das aktive überdruckt sie in Tanne. */
.imc-langs {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 -1px;
	padding: 0;
	list-style: none;
}

.imc-langs__item {
	margin: 0;
}

.imc-langs__link {
	display: flex;
	align-items: center;
	min-height: 44px; /* Trefferfläche nach WCAG 2.2 */
	padding: 0.35rem 0.85rem 0.5rem;
	text-decoration: none;
	color: var( --wp--preset--color--graphit );
	border-bottom: 2px solid transparent;
	text-decoration: none;
	transition: color 0.18s ease, border-color 0.18s ease;
}

.imc-langs__item:first-child .imc-langs__link {
	padding-left: 0;
}

.imc-langs__link:hover,
.imc-langs__link:focus-visible {
	color: var( --wp--preset--color--tinte );
	border-bottom-color: var( --wp--preset--color--graphit );
}

.imc-langs__item.is-current .imc-langs__link {
	color: var( --imc-akzent );
	border-bottom-color: var( --imc-akzent );
	font-weight: 400;
	text-decoration: none;
}

.imc-langs__item.is-current .imc-langs__link[aria-current="true"] {
	cursor: default;
}

/* Ohne Sprachwahl steht die Wortmarke allein auf der Zeile. */
.imc-header__row:not( :has( .imc-langs ) ) {
	padding-bottom: 0.75rem;
}

/* ---------------------------------------------------------------
   4 – Abschnitte mit Marginalspalte
   --------------------------------------------------------------- */

.imc-section {
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	padding-block: var( --wp--preset--spacing--60 );
}

.imc-section > * {
	max-width: var( --wp--style--global--content-size );
}

.imc-section > .imc-full {
	max-width: none;
}

@media ( min-width: 64rem ) {
	.imc-section:has( > .imc-label ) {
		display: grid;
		grid-template-columns: var( --imc-marginalie ) minmax( 0, 1fr );
		column-gap: var( --wp--preset--spacing--50 );
	}

	.imc-section > * {
		grid-column: 2;
	}

	.imc-section > .imc-label {
		grid-column: 1;
		grid-row: 1;
		position: sticky;
		top: 2rem;
		align-self: start;
		padding-top: 0.4rem;
	}

	/* Ohne Übertitel bliebe die Randspalte leer: sie fällt weg,
	   der Text beginnt am linken Rand. */
	.imc-ohne-uebertitel .imc-section {
		display: block;
	}
}

/* ---------------------------------------------------------------
   5 – Hero
   --------------------------------------------------------------- */

.imc-hero {
	padding-block: var( --wp--preset--spacing--70 ) var( --wp--preset--spacing--70 );
}

.imc-hero__title {
	max-width: 26ch;
	margin: 0;
}

.imc-hero__lead {
	max-width: 46ch;
	margin-top: var( --wp--preset--spacing--40 );
	font-size: var( --wp--preset--font-size--l );
	line-height: 1.3;
	color: var( --wp--preset--color--graphit );
}

@media ( prefers-reduced-motion: no-preference ) {
	.imc-hero > * {
		animation: imc-rise 0.55s cubic-bezier( 0.2, 0.7, 0.3, 1 ) backwards;
	}

	.imc-hero > *:nth-child( 2 ) {
		animation-delay: 0.07s;
	}

	.imc-hero > *:nth-child( 3 ) {
		animation-delay: 0.14s;
	}

	.imc-hero > *:nth-child( n + 4 ) {
		animation-delay: 0.21s;
	}
}

@keyframes imc-rise {
	from {
		opacity: 0;
		transform: translateY( 0.6rem );
	}
}

/* Die Tätigkeitsfelder stehen als eine Zeile, nicht als Aufzählung.
   Der Punkt trennt, wie auf der bisherigen Seite. */
.imc-dienste {
	line-height: 1.2;
	max-width: 26ch;
	color: var( --wp--preset--color--tinte );
}

.imc-section > .imc-dienste {
	max-width: 26ch;
}

/* LinkedIn: Zeichen und Wort zusammen. Ein Zeichen allein wird als Dekoration
   gelesen, und Grau bedeutet in jeder Oberfläche „nicht anklickbar" — beides
   Gründe, warum der Verweis übersehen wird. Erkennbar wird er nicht durch
   Farbe, sondern durch das Wort und die Unterlänge. Blau bleibt damit
   weiterhin der E-Mail-Adresse vorbehalten. */
.imc-linkedin {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px; /* Trefferfläche, das Zeichen selbst misst 18 */
	margin-top: var( --wp--preset--spacing--20 );
	color: var( --wp--preset--color--tinte );
	text-decoration: none;
}

.imc-linkedin__wort {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-thickness 0.15s ease;
}

.imc-linkedin:hover .imc-linkedin__wort,
.imc-linkedin:focus-visible .imc-linkedin__wort {
	text-decoration-thickness: 2px;
}

.imc-linkedin svg {
	display: block;
	flex: none;
}

/* Weiterführender Link statt Schaltfläche: gleiche Funktion, halbe Lautstärke. */
.imc-weiter a {
	font-size: var( --wp--preset--font-size--l );
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

/* Ohne Zwischentitel beginnt der Abschnitt unmittelbar mit dem Fliesstext. */
.imc-ohne-zwischentitel .imc-content > * {
	margin-block: 1.6rem;
}

/* ---------------------------------------------------------------
   6 – Leistungsliste
   --------------------------------------------------------------- */

.imc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.imc-list__item + .imc-list__item {
	margin-top: var( --wp--preset--spacing--50 );
}

.imc-list__item h3 {
	margin: 0 0 0.4rem;
}

.imc-list__item p {
	margin: 0;
	color: var( --wp--preset--color--graphit );
	max-width: 58ch;
}

/* ---------------------------------------------------------------
   7 – Beiträge
   --------------------------------------------------------------- */

.imc-entry + .imc-entry {
	margin-top: var( --wp--preset--spacing--50 );
}

.imc-entry .wp-block-post-title {
	margin: 0 0 0.5rem;
	font-size: var( --wp--preset--font-size--xl );
}

.imc-entry .wp-block-post-title a {
	text-decoration: none;
	color: var( --wp--preset--color--tinte );
	background-image: linear-gradient( var( --imc-akzent ), var( --imc-akzent ) );
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.25s ease, color 0.18s ease;
}

.imc-entry .wp-block-post-title a:hover,
.imc-entry .wp-block-post-title a:focus-visible {
	color: var( --imc-akzent );
	background-size: 100% 1px;
}

.imc-entry .wp-block-post-excerpt {
	color: var( --wp--preset--color--graphit );
	max-width: 62ch;
}

.imc-entry .wp-block-post-excerpt__more-link {
	font-size: var( --wp--preset--font-size--xs );
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

@media ( min-width: 64rem ) {
	.imc-entry {
		display: grid;
		grid-template-columns: var( --imc-marginalie ) minmax( 0, 1fr );
		column-gap: var( --wp--preset--spacing--50 );
	}

	.imc-entry > * {
		grid-column: 2;
	}

	.imc-entry > .wp-block-post-date,
	.imc-entry > .imc-meta {
		grid-column: 1;
		grid-row: 1;
		padding-top: 0.55rem;
	}
}

.imc-content > * {
	margin-block: 1.6rem;
}

.imc-content > h2,
.imc-content > h3 {
	margin-block: var( --wp--preset--spacing--50 ) 0.9rem;
}

.imc-content > h2 + *,
.imc-content > h3 + * {
	margin-top: 0;
}

.imc-content :is( ul, ol ) {
	padding-left: 1.2rem;
}

.imc-content li + li {
	margin-top: 0.4rem;
}

.imc-content figcaption {
	margin-top: 0.6rem;
}

/* ---------------------------------------------------------------
   8 – Fuss
   --------------------------------------------------------------- */

.imc-footer {
	max-width: var( --wp--style--global--wide-size );
	margin-inline: auto;
	margin-top: var( --wp--preset--spacing--70 );
	padding-block: 0 var( --wp--preset--spacing--40 );
}

.imc-footer a {
	color: var( --wp--preset--color--graphit );
	text-decoration: none;
}

.imc-footer a:hover,
.imc-footer a:focus-visible {
	color: var( --imc-akzent );
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   9 – Formulare
   --------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea,
select {
	font-family: inherit;
	font-size: var( --wp--preset--font-size--s );
	color: var( --wp--preset--color--tinte );
	background: transparent;
	border: 0;
	border-bottom: 1px solid var( --wp--preset--color--graphit );
	border-radius: 0;
	padding: 0.5rem 0;
	width: 100%;
	max-width: 26rem;
}

.wp-block-search__button,
.wp-block-button__link,
button:not( .imc-langs__link ) {
	border-radius: 0;
}

.wp-block-search__inside-wrapper {
	border: 0;
	gap: 0.75rem;
}

/* ---------------------------------------------------------------
   10 – Schmale Bildschirme
   --------------------------------------------------------------- */

@media ( max-width: 47.9375rem ) {
	.imc-header {
		padding-block: 1.25rem 0;
	}

	.imc-header__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
		width: 100%;
	}

	.imc-langs {
		margin-top: 0.25rem;
	}

	.imc-hero {
		padding-block: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--60 );
	}

	.imc-hero__title {
		max-width: none;
	}

	/* iOS zoomt bei Feldern unter 16 Pixeln in die Seite hinein. */
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="search"],
	input[type="tel"],
	textarea,
	select {
		font-size: 1rem;
	}

	.wp-block-search__inside-wrapper {
		flex-wrap: wrap;
	}
}

/* Zeigegeräte ohne Hover: Zustände nicht an Hover hängen. */
@media ( hover: none ) {
	.imc-entry .wp-block-post-title a {
		background-size: 100% 1px;
	}
}

/* ---------------------------------------------------------------
   11 – Druck
   --------------------------------------------------------------- */

@media print {
	.imc-langs,
	.wp-block-query-pagination {
		display: none;
	}

	body {
		background: #fff;
		color: #000;
	}

	.imc-section {
		display: block;
		break-inside: avoid;
	}
}