/* SQUARIX - responsives Layout (Startseite)
   Ersetzt für Seiten im neuen Layout die festen 960px-Tabellen aus menue.css */

:root
	{
	--blaugrau: #3E4C67;
	--blau-hover: #2a5db0;
	--blau-text: #3a7fc1;
	--rot: #e3003d;
	--max: 1400px;
	}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body
	{
	margin: 0;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	color: #222;
	background: #fff;
	}

/* Bilder der neuen Bausteine; Bilder in alten Seiteninhalten bleiben unverändert (inline) */
.kopf img, .kachel img, .hero-bild img { max-width: 100%; height: auto; display: block; }

.seite
	{
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 clamp(0px, 1vw, 10px);
	}

/* ---------- Kopf ---------- */

/* Die Seite ist "Container": 100cqw = Breite des Kopfes.
   --bh = Höhe der Kopfleiste, --s = Skalierungsfaktor der Kopfleisten-Grafik
   (Original 960 x 78 px). Das Antikörper-Fragment über der Linie wird mit
   demselben Faktor skaliert, damit es immer exakt an die Kopfleiste anschließt. */
.seite { container-type: inline-size; }

.kopf
	{
	--bh: clamp(46px, calc(100cqw * 78 / 960), 120px);
	--s: max(calc(100cqw / 960), calc(var(--bh) / 78));
	display: grid;
	grid-template-columns: minmax(185px, calc(430 * var(--s))) minmax(0, 1fr);
	grid-template-rows: minmax(calc(57 * var(--s)), auto) auto auto;
	grid-template-areas:
		"logo   suche"
		"banner banner"
		"nav    nav";
	}

.logo
	{
	grid-area: logo;
	align-self: end;
	padding: 4px 0 4px 10px;
	}

.logo img { width: 165px; height: auto; }

.suche
	{
	grid-area: suche;
	align-self: end;
	justify-self: end;
	display: flex;
	width: 100%;
	max-width: 460px;
	margin-bottom: 7px;
	}

.suche input
	{
	flex: 1 1 auto;
	min-width: 0;
	font: 14px Verdana, Arial, Helvetica, sans-serif;
	padding: 6px 8px;
	border: 1px solid #000;
	border-right: 0;
	}

.suche button
	{
	flex: 0 0 auto;
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	padding: 6px 12px;
	border: 1px solid #000;
	background: #fff;
	cursor: pointer;
	}

.suche button:hover, .suche button:focus { background: var(--blaugrau); color: #fff; }

/* Kopfleiste: Bild füllt jede Breite, links oben verankert (Molekül bleibt sichtbar) */
.kopfleiste
	{
	grid-area: banner;
	position: relative;
	height: var(--bh);
	background: #6f8db3 url("../graphch2/kopfleiste_banner.jpg") left top / auto var(--bh) no-repeat;
	background-size: calc(960 * var(--s)) calc(78 * var(--s));
	}

/* Fortsetzung des Antikörpers über der Linie (aus kopfleiste_01.jpg, x = 360..421) */
.kopfleiste-fragment
	{
	position: absolute;
	left: calc(360 * var(--s));
	bottom: 100%;
	width: calc(61 * var(--s));
	height: calc(57 * var(--s));
	pointer-events: none;
	}

/* ---------- Hauptmenü ---------- */

.hauptmenue { grid-area: nav; background: var(--blaugrau); position: relative; z-index: 50; }

.menue-schalter { position: absolute; opacity: 0; pointer-events: none; }
.menue-knopf { display: none; }

.menue, .menue ul { list-style: none; margin: 0; padding: 0; }

.menue { display: flex; }

.menue > li { flex: 1 1 0; position: relative; }

.menue a
	{
	display: block;
	color: #fff;
	text-decoration: none;
	font-size: 0.8rem;
	padding: 5px 10px;
	background: var(--blaugrau);
	}

.menue > li > a { text-align: center; border-right: 1px solid #fff; }
.menue > li:last-child > a { border-right: 0; }

.menue a:hover, .menue a:focus-visible { background: var(--blau-hover); }

.menue li ul
	{
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	min-width: 100%;
	border-top: 1px solid #fff;
	}

.menue li ul a
	{
	white-space: nowrap;
	border: 1px solid #fff;
	border-top: 0;
	padding: 6px 10px;
	}

.menue li ul a::before { content: "> "; }

.menue li:hover > ul,
.menue li:focus-within > ul { display: block; }

/* ---------- Pfad / Linien ---------- */

.pfad
	{
	margin: 0;
	padding: 3px 10px;
	font-size: 0.76rem;
	color: var(--blaugrau);
	border-bottom: 2px solid var(--blaugrau);
	}

/* ---------- Inhalt Startseite ---------- */

.inhalt { padding: clamp(20px, 4vw, 50px) 10px clamp(24px, 4vw, 40px); }

.start .titel
	{
	margin: 0 auto;
	max-width: 1000px;
	padding-left: 8%;
	font-weight: normal;
	font-style: italic;
	font-size: clamp(1.7rem, 4.2vw, 2.6rem);
	color: #000;
	}

.start .untertitel
	{
	margin: 0.15em auto 0;
	max-width: 1000px;
	padding-left: 15%;
	font-weight: bold;
	font-size: clamp(1.1rem, 2.6vw, 1.75rem);
	color: var(--blau-text);
	}

.kacheln
	{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 480px));
	justify-content: center;
	gap: clamp(20px, 5vw, 70px);
	margin-top: clamp(28px, 5vw, 50px);
	}

.kachel
	{
	display: block;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 1px 4px rgba(0,0,0,.15);
	}

.kachel img
	{
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .3s ease;
	}

.kachel:hover img, .kachel:focus-visible img { transform: scale(1.03); }

.kachel-text
	{
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 6px 12px;
	text-align: right;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	color: var(--blaugrau);
	background: rgba(255,255,255,.88);
	}

.kachel-text::before
	{
	content: "\2192\00a0";
	color: var(--rot);
	font-weight: bold;
	}

.kachel:hover .kachel-text { color: var(--rot); }

/* ---------- Fuß ---------- */

.fuss
	{
	display: flex;
	justify-content: space-between;
	padding: 4px 10px 12px;
	border-top: 2px solid var(--blaugrau);
	font-size: 0.95rem;
	}

.fuss a:link    { color: #3E4C67; }
.fuss a:visited { color: #808080; }
.fuss a:hover   { color: #FF0000; }

/* ---------- Cookie-Hinweis (aus menue.css übernommen) ---------- */
.cc_container .cc_btn { background-color: #e4e4e4 !important; color: #000 !important; }
.cc_container { background: #3E4C67 !important; color: #fdfdfd !important; }
.cc_container a { color: #f50 !important; }

/* ================= Kleine Bildschirme ================= */

@media (max-width: 760px)
	{
	.kopf
		{
		grid-template-columns: 1fr;
		grid-template-rows: minmax(calc(57 * var(--s)), auto) auto auto auto;
		grid-template-areas: "logo" "banner" "nav" "suche";
		}

	.suche { max-width: none; margin: 8px 0 4px; }

	.menue-knopf
		{
		display: flex;
		align-items: center;
		gap: 10px;
		color: #fff;
		padding: 10px 12px;
		cursor: pointer;
		font-size: 0.95rem;
		}

	.menue-icon, .menue-icon::before, .menue-icon::after
		{
		display: block;
		width: 22px;
		height: 2px;
		background: #fff;
		position: relative;
		content: "";
		}
	.menue-icon::before { position: absolute; top: -7px; }
	.menue-icon::after  { position: absolute; top: 7px; }

	.menue { display: none; flex-direction: column; }
	.menue-schalter:checked ~ .menue { display: flex; }
	.menue-schalter:focus-visible + .menue-knopf { outline: 2px solid #fff; outline-offset: -4px; }

	.menue > li > a
		{
		text-align: left;
		border-right: 0;
		border-top: 1px solid rgba(255,255,255,.4);
		padding: 11px 12px;
		font-size: 0.95rem;
		font-weight: bold;
		}

	/* Untermenüs auf Touch-Geräten immer sichtbar, eingerückt */
	.menue li ul
		{
		display: block;
		position: static;
		border-top: 0;
		}

	.menue li ul a
		{
		border: 0;
		border-top: 1px solid rgba(255,255,255,.15);
		padding: 10px 12px 10px 28px;
		font-size: 0.9rem;
		white-space: normal;
		}

	.start .titel, .start .untertitel { padding-left: 0; text-align: center; }

	.kacheln { grid-template-columns: minmax(0, 480px); }
	}

/* letztes Untermenü rechtsbündig, damit es nicht aus dem Bild ragt */
@media (min-width: 761px)
	{
	.menue > li:last-child ul { left: auto; right: 0; }
	}

/* =====================================================================
   Unterseiten
   ===================================================================== */

/* Raster: linke Navigationsleiste + Hauptfeld */
.unterseite
	{
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	align-items: stretch;
	}

.seitennavi
	{
	background: #F4F5F6;
	padding-bottom: 14px;
	}

.seitennavi-titel
	{
	margin: 0 0 10px;
	padding: 6px 8px;
	background: var(--blaugrau);
	color: #EFFFFF;
	font-size: 0.82rem;
	text-align: center;
	}

.seitennavi ul { list-style: none; margin: 0; padding: 0 8px; }
.seitennavi li { margin: 0 0 8px; padding-left: 12px; position: relative; font-size: 0.8rem; line-height: 1.3; }
.seitennavi li::before { content: ">"; position: absolute; left: 0; color: var(--blaugrau); }
.seitennavi a:link    { color: #3E4C67; }
.seitennavi a:visited { color: #808080; }
.seitennavi a:hover   { color: #FF0000; }

.hauptfeld { min-width: 0; }

.hauptfeld h1
	{
	margin: 0 0 1em;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	color: #005290;
	}

.hauptfeld h2
	{
	margin: 0.6em 0 0.3em;
	font-size: clamp(1.2rem, 2vw, 1.42rem);
	color: #005290;
	}

/* Aufzählung mit rotem Quadrat (ersetzt rotpkt.png) */
.punktliste { list-style: none; margin: 0 0 0.5em; padding: 0; }
.punktliste li
	{
	position: relative;
	padding: 0.25em 0 0.25em 1.6em;
	color: #3E4C67;
	font-size: 1.01rem;
	}
.punktliste li::before
	{
	content: "";
	position: absolute;
	left: 0.1em;
	top: 0.6em;
	width: 0.6em;
	height: 0.6em;
	background: #c8102e;
	}
.punktliste.gross li { font-size: 1.15rem; padding-top: 0.35em; padding-bottom: 0.35em; }
.punktliste a { text-decoration: none; }
.punktliste a:link    { color: #3E4C67; }
.punktliste a:visited { color: #808080; }
.punktliste a:hover   { color: #FF0000; }

/* Hero: Text links auf heller Fläche, Bild rechts, weich eingeblendet */
.hero
	{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 512px);
	align-items: stretch;
	min-height: 375px;
	background: #EEF1F8;
	}

.hero-text { padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 48px); }

.hero-bild { position: relative; overflow: hidden; }

.hero-bild img
	{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
	        mask-image: linear-gradient(to right, transparent 0, #000 22%);
	}

/* Antibody Technology: Hintergrund aus "0962 Antibody ... HG.psd" */
.antibtech
	{
	position: relative;
	min-height: 375px;
	padding: 0 0 clamp(20px, 3vw, 36px);
	background: #E9EEF5 url("../graphch2/hg_antibody.jpg") left top / cover no-repeat;
	}

/* Schriftzug "Antibody Technology" (statt in die Grafik eingebrannt) */
.antib-banner
	{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 0 0 auto !important;
	width: max-content;
	max-width: 100%;
	padding: 6px clamp(20px, 3vw, 40px) 6px clamp(28px, 4vw, 56px);
	background: #005290;
	clip-path: polygon(clamp(14px, 2vw, 26px) 0, 100% 0, 100% 100%, 0 100%);
	color: #fff !important;
	font-style: italic;
	line-height: 1;
	}
.antib-banner-1 { font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -0.01em; }
.antib-banner-2 { font-size: clamp(1rem, 2vw, 1.45rem); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px; }

.antib-spalten
	{
	display: grid;
	grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
	gap: 20px clamp(16px, 3vw, 40px);
	padding: 0 clamp(16px, 3vw, 40px);
	}

.antib-claim
	{
	align-self: center;
	margin: 0;
	padding-left: clamp(0px, 2vw, 20px);
	font-size: clamp(1.3rem, 2.4vw, 1.58rem);
	font-weight: bold;
	color: #005290;
	text-shadow: 0 0 12px rgba(255,255,255,.9);
	}

.antib-listen { padding-top: 6px; }
.antib-listen h2 { margin-top: 0.3em; }

@media (max-width: 760px)
	{
	.unterseite { grid-template-columns: 1fr; }
	.unterseite .seitennavi { order: 2; }
	.unterseite .hauptfeld  { order: 1; }

	.hero { grid-template-columns: 1fr; min-height: 0; }
	.hero-bild { order: -1; max-height: 260px; }
	.hero-bild img { -webkit-mask-image: none; mask-image: none; object-position: center; }

	.antib-spalten { grid-template-columns: 1fr; }
	.antib-claim { padding: 10px 0 0; }
	}

/* =====================================================================
   Alte Seiten im neuen Rahmen (.altseite)
   Das feste 960px-Tabellengerüst wird per CSS aufgelöst; die Inhalte
   behalten ihre bisherigen Formate aus inhalt.css.
   ===================================================================== */

.altseite { font-family: Arial, Verdana, Helvetica, sans-serif; }

/* äußere Hülle: keine Tabelle mehr, volle Breite */
.altseite table.aussen,
.altseite table.aussen > tbody,
.altseite table.aussen > tbody > tr,
.altseite table.aussen > tbody > tr > td
	{
	display: block;
	float: none !important;
	width: auto !important;
	text-align: left;
	}

/* Rahmen: Pfadzeile, Linie, linke Spalte + Hauptfeld, Fuß */
.altseite table.rahmen,
.altseite table.rahmen > tbody { display: block; float: none !important; width: 100% !important; }

.altseite table.rahmen > tbody > tr { display: flex; }

.altseite table.rahmen > tbody > tr > td
	{
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	}

/* unsichtbare Breiten-Zeile (150/810) wird nicht mehr gebraucht */
.altseite table.rahmen > tbody > tr:has(> td.lh01) { display: none; }

/* linke Navigationsleiste */
.altseite table.rahmen > tbody > tr > td.hfvio2 { flex: 0 0 180px; }
.altseite td.hfvio2 > table { width: 100% !important; }

/* Hauptfeld: darf bei breiten Tabellen seitlich scrollen statt die Seite zu sprengen */
.altseite table.rahmen > tbody > tr > td:not(.hfvio2) { overflow-x: auto; contain: inline-size; }

/* feste Inhaltsbreiten auf die verfügbare Breite umstellen */
.altinhalt table[width="960"]:not(.aussen):not(.rahmen),
.altinhalt table[width="811"],
.altinhalt table[width="810"],
.altinhalt table[width="808"] { width: 100% !important; }
.altinhalt table.hgbild2 { width: 100% !important; }

/* Bilder skalieren mit; die blaue Trennlinie bleibt 2px hoch */
.altinhalt img { max-width: 100%; }
.altinhalt img[src$="punkt.gif"] { display: block; width: 100%; height: 2px; }

/* Hintergrundbilder der Hauptfelder: nicht kacheln, rechts oben, Rest in Hintergrundfarbe */
.altinhalt td[background],
.altinhalt table[background]
	{
	background-repeat: no-repeat !important;
	background-position: right top !important;
	background-color: #EEF1F8;
	}

/* Formularfelder nie breiter als die Spalte */
.altinhalt input[type="text"], .altinhalt input[type="email"], .altinhalt input:not([type]),
.altinhalt textarea, .altinhalt select { max-width: 100%; box-sizing: border-box; }

/* Fußzeile (fuss2.php / fuss3.php) */
.altseite table.rahmen > tbody > tr:last-child > td { padding-bottom: 12px; }

@media (max-width: 760px)
	{
	.altseite table.rahmen > tbody > tr { flex-direction: column; }
	.altseite table.rahmen > tbody > tr > td.hfvio2 { order: 2; flex-basis: auto; }

	/* die letzte Zeile (Contact / legal notice) bleibt nebeneinander */
	.altseite table.rahmen > tbody > tr:last-child { flex-direction: row; justify-content: space-between; }

	.altinhalt img { height: auto; }
	.altinhalt img[src$="punkt.gif"] { height: 2px; }

	/* feste Spaltenbreiten der Inhaltstabellen aufheben: Text bekommt die volle Breite,
	   leere Abstandsspalten schrumpfen */
	.altinhalt table.rahmen td[width] { width: auto !important; }
	.altinhalt table.rahmen td.j { text-align: left; }
	.altinhalt table.rahmen td.e190 { font-size: 1.7em; }

	/* dekorative Hintergrundbilder würden auf dem Handy den Text überdecken */
	.altinhalt td[background],
	.altinhalt table[background] { background-image: none !important; }
	.altinhalt table.hgbild1, .altinhalt table.hgbild2, .altinhalt table.hgbild3 { background-image: none !important; height: auto !important; }
	}