/*
-----------------------------------------------
		www.popp-immobilien.com
	 by www.mkreuzer.de
	and www.lichtsignale.de

	Ueberarbeitet 28.07.2026 (Lichtsignale):
	Farben, Schriften und das Spaltenraster stehen
	jetzt als Variablen ganz oben — wer etwas aendern
	will, aendert es dort einmal statt an dreissig
	Stellen. Am Aussehen aendert sich nichts.
----------------------------------------------- */


/*		S T E L L S C H R A U B E N
----------------------------------------------- */

:root {
		/* Farben */
		--rot: #e30613;
		--text: #111;
		--flaeche: #fff;

		/* Schriften */
		--schrift: "Artegra Sans W01 Regular", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
		--schrift-breit: "Artegra Sans Extended W01 Rg", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;
		--schrift-breit-halbfett: "Artegra Sans Extended W01 SmBd", "Helvetica Neue", Helvetica, "Roboto", Arial, sans-serif;

		/* Das Raster: Die Seite ist in elf Spalten gedacht. Die
		   Klassen .left-one bis .left-six ruecken um so viele
		   Spalten ein, plus einen kleinen Versatz, der mit der
		   Bildschirmbreite waechst (siehe Media Queries unten). */
		--spalte: calc(100% / 11);
		--versatz: 11px;

		/* Der Grundabstand, aus dem sich alle Abstaende ableiten */
		--takt: 22px;
}


/*		R E S E T
----------------------------------------------- */

*,
*::before,
*::after {
		margin: 0;
		padding: 0;
		border: 0;
		background: transparent;
		vertical-align: baseline;
		font-size: 100%;
		font-variant-ligatures: none;
}

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

/* Die Sprungmarken-Bewegung steuert media/scroll.js — dort laesst
   sich die Dauer festlegen, was scroll-behavior: smooth nicht kann. */


/*		W E B F O N T S
----------------------------------------------- */

/* Monotype-Zaehlaufruf (fast.fonts.net) am 28.07.2026 deaktiviert: laedt nichts,
   zaehlt nur Seitenaufrufe, blockiert das Rendering und uebertraegt die Besucher-IP
   an Monotype, ohne dass die Datenschutzerklaerung ihn nennt. Die Schriften liegen
   lokal und funktionieren ohne ihn. Falls die fonts.com-Lizenz die Zaehlung
   verlangt, diese Zeile wieder aktivieren:
@import url("https://fast.fonts.net/lt/1.css?apiType=css&c=c8ef8ba1-2f25-4179-952e-e8093eb7e52d&fontids=5528339,5529812,5529983");
*/

@font-face {
		font-family: "Artegra Sans W01 Regular";
		src: url("fonts/5528339/69244766-fafb-44dc-89f6-890eae906e0a.woff2") format("woff2"),
		url("fonts/5528339/955251a0-ee71-4b2e-82ac-17e655fcc602.woff") format("woff");
		font-display: swap;
}

@font-face {
		font-family: "Artegra Sans Extended W01 Rg";
		src: url("fonts/5529812/a616115e-a66d-4c2d-8c41-c009ead60ec6.woff2") format("woff2"),
		url("fonts/5529812/c5519fec-9c0d-40e6-bd9d-ab3be0bb6c02.woff") format("woff");
		font-display: swap;
}

@font-face {
		font-family: "Artegra Sans Extended W01 SmBd";
		src: url("fonts/5529983/c72679ef-3116-4b6f-9f8a-84cf11eb993e.woff2") format("woff2"),
		url("fonts/5529983/6231ef9f-df87-4bb7-b1d9-fded24e078d4.woff") format("woff");
		font-display: swap;
}


/*		B A S I C S
----------------------------------------------- */

body {
		color: var(--text);
		background: var(--flaeche);
		font-family: var(--schrift);
		font-size: 16px;
		line-height: 22px;
		letter-spacing: 0.025em;
		text-align: left;
}

img {
		max-width: 100%;
		height: auto;
}

header a:link, header a:visited, footer a:link, footer a:visited {
		text-decoration: none;
		color: var(--text);
}

header a:hover, header a:active, footer a:hover, footer a:active {
		color: var(--rot);
}

main a:link, main a:visited {
		text-decoration: none;
		color: var(--rot);
		border-bottom: 1px solid var(--rot);
}

main a:hover, main a:active {
		border-bottom: 1px solid var(--flaeche);
}

#wrapper {
		margin: 10px 15px 0 15px;
}


/*		B E D I E N U N G  M I T  T A S T A T U R
	Frueher stand hier *:focus{outline:none} — damit war fuer Tastatur-
	Bedienung nicht mehr erkennbar, wo man sich befindet. :focus-visible
	zeigt die Markierung nur bei Tastatur/Stift, fuer die Maus aendert
	sich nichts.
----------------------------------------------- */

*:focus:not(:focus-visible) {
		outline: none;
}

*:focus-visible {
		outline: 2px solid var(--rot);
		outline-offset: 4px;
}

.skip-link {
		position: absolute;
		left: -9999px;
		top: 0;
}

.skip-link:focus {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		background: var(--flaeche);
		color: var(--text);
		padding: 10px 15px;
		text-decoration: none;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* AOS kennt die Systemeinstellung "Bewegung reduzieren" nicht — weder
   aos.js noch aos.css erwaehnen prefers-reduced-motion. Wer sie gesetzt
   hat (z.B. wegen Schwindel bei bewegten Inhalten), bekommt die
   Einblendungen hier abgeschaltet und sieht alles sofort. */
@media (prefers-reduced-motion: reduce) {
		[data-aos] {
				opacity: 1 !important;
				transform: none !important;
				transition: none !important;
				animation: none !important;
		}
}

/* Text, der nur fuer Screenreader da ist (z.B. der Name im Logo-Schriftzug). */
.nur-vorlesen {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
}


/*		H E A D E R
----------------------------------------------- */

header {
		font-family: var(--schrift-breit-halbfett);
		margin-bottom: calc(var(--takt) * 2);
}

h1 {
		position: relative;
		top: -10px;
}

h1 svg {
		fill: var(--rot);
		width: calc(100% + 3px);
}

nav {
		margin-bottom: calc(var(--takt) * 2);
}

nav li {
		list-style: none;
		display: inline-block;
		margin: 0 10px 10px 0;
}

nav li:nth-child(1), nav li:nth-child(2) {
		display: block;
}

nav span {
		color: var(--rot);
		display: none;
}

header figure {
		width: 50%;
		margin-left: 50%;
}


/*		M A I N
----------------------------------------------- */

main div, main p, .presseliste {
		margin-bottom: calc(var(--takt) * 3);
}

main #kontakt p {
		margin-bottom: var(--takt);
}

#kontakt p span {
		color: var(--rot);
}

/* Einrueckung nach dem Elf-Spalten-Raster */
.left-one   { margin-left: calc(var(--spalte) * 1 + var(--versatz)); }
.left-two   { margin-left: calc(var(--spalte) * 2 + var(--versatz)); }
.left-three { margin-left: calc(var(--spalte) * 3 + var(--versatz)); }
.left-four  { margin-left: calc(var(--spalte) * 4 + var(--versatz)); }

.number {
		font-family: var(--schrift-breit-halbfett);
		display: block;
		color: var(--rot);
		font-size: 45px;
		letter-spacing: -0.025em;
		line-height: 0.8;
		margin-bottom: 3px;
}

.name {
		font-family: var(--schrift-breit-halbfett);
		display: block;
		line-height: 1.15;
		margin-left: 58px;
}

.name a {
		font-family: var(--schrift-breit);
		margin-bottom: 3px;
		display: inline-block;
}

#intro .name {
		position: relative;
		left: 48px;
		margin-top: -38px;
		width: 50%;
}

h2 {
		font-family: var(--schrift-breit-halbfett);
		font-weight: normal;
		margin-bottom: var(--takt);
}

h2 span {
		display: block;
		color: var(--rot);
}

h2::before {
		content: "";
		display: block;
		width: 1px;
		height: calc(var(--takt) * 3);
		background: var(--text);
		float: left;
		margin-right: var(--takt);
		margin-left: 18px;
		transform: rotate(30deg);
		position: relative;
		top: -10px;
}

/* Die Presseliste war frueher ein Fliesstext mit <br>-Umbruechen. Jetzt ist
   sie eine echte Liste: Vorlesehilfen kuendigen die Zahl der Eintraege an und
   man kann von Eintrag zu Eintrag springen. Optisch bleibt alles, wie es war —
   1lh Abstand entspricht genau der frueheren Leerzeile. */

.presse-intro {
		margin-bottom: 1lh;
}

.presseliste {
		list-style: none;
		padding: 0;
}

.presseliste li {
		list-style: none;
		margin-bottom: 1lh;
}

.presseliste li:last-child {
		margin-bottom: 0;
}

.centered {
		text-align: center;
}

#kontakt figure {
		margin: calc(var(--takt) * 3) 0 var(--takt) 0;
}

#kontakt .name {
		color: var(--text);
		font-size: 45px;
		letter-spacing: -0.025em;
		line-height: 0.8;
		margin-left: 0;
		margin-bottom: 0;
}

p strong {
		font-weight: normal;
		font-family: var(--schrift-breit-halbfett);
}

p em {
		font-style: normal;
		font-family: var(--schrift-breit-halbfett);
}


/*		R E C H T S T E X T E  (Impressum, Datenschutz)
	Lange Fliesstexte mit eigener Gliederung. Optisch wie bisher —
	Zwischentitel in der schmalen Extended-Schrift, Absaetze eng
	untereinander — aber mit echten Ueberschriften statt <strong>
	und <br>, damit Screenreader durch die Abschnitte springen
	koennen.
----------------------------------------------- */

.rechtstext {
		margin-bottom: calc(var(--takt) * 3);
}

.rechtstext h3,
.rechtstext h4,
.rechtstext h5 {
		font-family: var(--schrift-breit-halbfett);
		font-size: inherit;
		font-weight: normal;
		line-height: inherit;
}

.rechtstext h3 {
		margin: 2.5em 0 1em 0;
}

.rechtstext h4 {
		margin: 2em 0 0.5em 0;
}

.rechtstext h5 {
		margin: 1.2em 0 0 0;
}

.rechtstext > *:first-child {
		margin-top: 0;
}

/* Die Textbreite begrenzt der Container (siehe Media Query ab
   730px), damit Absaetze, Listen und Titel gleich weit laufen. */
.rechtstext p {
		width: auto;
		margin-bottom: 1em;
}

.rechtstext ul {
		margin: 0 0 1em 0;
		padding-left: 1.2em;
}

.rechtstext li {
		list-style: disc;
		margin-bottom: 0.5em;
}


/*		F O O T E R
----------------------------------------------- */

footer {
		margin-top: calc(var(--takt) * 4);
}

footer p {
		margin-bottom: var(--takt);
}

footer figure svg {
		fill: var(--rot);
		margin-bottom: -6px;
		position: relative;
}


/*		R E S P O N S I V E
----------------------------------------------- */

@media (min-width: 420px) {

.left-five { margin-left: calc(var(--spalte) * 5 + var(--versatz)); }
.left-six  { margin-left: calc(var(--spalte) * 6 + var(--versatz)); }

header {
		margin-bottom: calc(var(--takt) * 4);
}

nav {
		margin-bottom: calc(var(--takt) * 3);
		width: 400px;
}

nav li:nth-child(1), nav li:nth-child(2) {
		display: inline-block;
}

header figure {
		width: 40%;
		margin-left: calc(var(--spalte) * 5 + var(--versatz));
}

#intro .number {
		font-size: 65px;
		letter-spacing: -0.035em;
}

#intro .name {
		position: relative;
		left: 77px;
		margin-top: -40px;
		width: 50%;
}

}


@media (min-width: 500px) {

header {
		margin-bottom: calc(var(--takt) * 4.5);
}

header figure {
		width: 30%;
		margin-left: calc(var(--spalte) * 6 + var(--versatz));
}

.number {
		font-size: 65px;
		letter-spacing: -0.035em;
		margin-bottom: 3px;
}

.name {
		margin-left: 84px;
}

#intro .number {
		font-size: 85px;
		letter-spacing: -0.04em;
}

#intro .name {
		left: 115px;
		margin-top: -40px;
}

.left, .right {
		display: inline-block;
		width: 49%;
}

main div, main p, .presseliste {
		margin-bottom: calc(var(--takt) * 4);
}

}


@media (min-width: 730px) {

#wrapper {
		margin-left: 30px;
		margin-right: 30px;
}

nav {
		width: auto;
		font-size: 90%;
}

nav li {
		margin-right: 15px;
}

nav li:nth-child(3) {
		margin-right: 2px;
}

nav li:last-child {
		margin-right: 0;
}

nav span {
		display: block;
		opacity: 0;
}

nav a:hover span {
		opacity: 1;
}

header figure {
		width: 25%;
		margin-left: calc(var(--spalte) * 7 + var(--versatz));
}

h2 {
		font-size: 25px;
		letter-spacing: -0.01em;
		line-height: 1.15;
}

h2::before {
		height: calc(var(--takt) * 4);
		margin-right: calc(var(--takt) * 1.5);
		margin-left: 0;
		margin-top: -10px;
}

.name {
		font-size: 25px;
		letter-spacing: -0.01em;
		line-height: 1.05;
		margin-left: 82px;
}

#intro .number {
		font-size: 125px;
		letter-spacing: -0.05em;
}

#intro .name {
		left: 165px;
		margin-top: -43px;
}

main p,
.presseliste,
.rechtstext {
		width: calc(var(--spalte) * 9 - var(--takt));
}

#kontakt p.centered {
		width: 100%;
}

#kontakt figure {
		margin-left: auto;
		margin-right: auto;
		width: calc(var(--spalte) * 7 - var(--takt));
}

}


@media (min-width: 950px) {

:root {
		--versatz: 15px;
}

body {
		font-size: 22px;
		line-height: 33px;
		letter-spacing: 0.025em;
}

#wrapper {
		width: 890px;
		margin-left: auto;
		margin-right: auto;
}

header {
		margin-bottom: calc(var(--takt) * 6);
}

nav {
		margin-bottom: calc(var(--takt) * 4.5);
		white-space: nowrap;
		line-height: 25px;
}

nav li {
		margin-right: 11px;
}

nav li:nth-child(3) {
		margin-right: -3px;
}

header figure {
		width: 20%;
		margin-left: calc(var(--spalte) * 7 + var(--versatz));
}

main p, .presseliste {
		margin-bottom: calc(var(--takt) * 6);
}

main #kontakt p {
		margin-bottom: calc(var(--takt) * 1.5);
}

main div {
		margin-bottom: calc(var(--takt) * 4.5);
}

section {
		margin-bottom: 125px;
		padding-top: 40px;
}

footer {
		margin-top: calc(var(--takt) * 4.5);
}

footer p {
		margin-bottom: calc(var(--takt) * 1.5);
}

footer figure svg {
		margin-bottom: -10px;
}

h2 {
		font-size: 40px;
		letter-spacing: -0.02em;
		line-height: 1.15;
		margin-bottom: calc(var(--takt) * 1.5);
		position: relative;
		left: -8px;
}

h2::before {
		height: 130px;
		margin-right: 45px;
		margin-left: 0;
		margin-top: -12px;
}

.number {
		font-size: 100px;
		letter-spacing: -0.045em;
		margin-bottom: 4px;
}

.name {
		font-size: 40px;
		letter-spacing: -0.02em;
		line-height: 1.05;
		margin-left: 120px;
}

#intro {
		margin-bottom: calc(var(--takt) * 7.5);
}

#intro .number {
		font-size: 175px;
		letter-spacing: -0.05em;
}

#intro .name {
		left: 270px;
		margin-top: -88px;
}

#kontakt .name {
		font-size: 60px;
		letter-spacing: -0.035em;
		margin-bottom: 5px;
}

}


@media (min-width: 1350px) {

:root {
		--versatz: 22px;
}

body {
		font-size: 33px;
		line-height: 45px;
		letter-spacing: 0.015em;
}

#wrapper {
		width: 1290px;
		margin-left: auto;
		margin-right: auto;
}

header {
		margin-bottom: 180px;
}

nav {
		margin-bottom: 135px;
		line-height: 35px;
}

nav li:nth-child(3) {
		margin-right: -8px;
}

header figure {
		width: 20%;
		margin-left: calc(var(--spalte) * 7 + var(--versatz));
}

main p, .presseliste {
		margin-bottom: 180px;
}

main #kontakt p {
		margin-bottom: 45px;
}

main div {
		margin-bottom: 135px;
}

section {
		margin-bottom: 175px;
		padding-top: 50px;
}

footer {
		margin-top: 135px;
}

footer p {
		margin-bottom: 45px;
}

footer figure svg {
		margin-bottom: -12px;
}

h2 {
		font-size: 40px;
		letter-spacing: -0.02em;
		line-height: 1.15;
		margin-bottom: 45px;
		position: relative;
		left: -8px;
}

h2::before {
		height: 130px;
		margin-right: 45px;
		margin-left: 0;
		margin-top: -12px;
}

.number {
		font-size: 140px;
		letter-spacing: -0.055em;
		margin-bottom: 6px;
}

.name {
		font-size: 55px;
		letter-spacing: -0.04em;
		line-height: 1;
		margin-left: 180px;
}

#intro {
		margin-bottom: 180px;
}

#intro .number {
		font-size: 255px;
		letter-spacing: -0.06em;
}

#intro .name {
		left: 380px;
		margin-top: -121px;
}

#kontakt .name {
		font-size: 90px;
		letter-spacing: -0.05em;
		margin-bottom: 5px;
}

}