<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/*

FORM UND AUSSEHEN DER ELEMENTE
Alle Eigenschaften, die das Aussehen bestimmen, aber nicht zur Grundarchtektur gehÃ¶ren.

*/

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  FARBEN GRUNDLAGEN  //////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

:root
{

/* ///  HAUPTFARBEN  ////////////////////////////////////////////////////////////// */

/* /// EIGENFARBEN /// */

/* /// farbe1: krÃ¤ftiges cyan mit leichtem GrÃ¼nstich /////////////////////////////////

Farbwerte: 
CMYK: 100 / 0 / 0 / 0
RGB: 000 / 180 / 230					(angepasst)
HEX: 00 / b4 / e6						(angepasst)

Verwendet fÃ¼r:
- Logofarbe

- Schrift Navi
- Navi-Button Hintergrund (mobil)
- Nummerierung bei sortierten Listen
- AbschwÃ¤chungen im Text (Trennzeichen usw.)
- Standardfarbe fÃ¼r ausgezeichnete Links
- Trennzeichen Projektinfo

*/
--farbe1: #00b4e6ff;					/* angepasst */





/* /// farbe2: Rechnerisches RGB-Cyan ////////////////////////////////////////////////

Farbwerte:
RGB: 000 / 255 / 255
HEX: 00 / ff / ff

Verwendet fÃ¼r:

- Links mouseover
- Links aktiv

*/

--farbe2: #00ffffff;



/* /// farbe4: sehr dunkles blau /////////////////////////////////////////////////////

Farbwerte:
CMYK: 100 / 80 / 40 / 40

RGB: 30 / 45 / 80						(angepasst)
RGB: 28 / 44 / 82						(Photoshop)
RGB: 00 / 31 / 92						(sonstige)

HEX: 1c / 2c / 52						(Photoshop)
HEX: 00 / 1f / 5c						(sonstige)
HEX: 08 / 22 / 44						(angepasst --&gt; krÃ¤ftiger, dunkler)


Verwendet fÃ¼r:
- Standardhintergrund (html)
- Navi-Overlay-Hintergrund (mobil)
- Navi-Standardicons (mobil)
- Navi-Icon (mobil)

 */

--farbe4: lab(017 -2 -24);				/* Berechnung Photoshop --&gt; wird viel passender angezeigt */
--farbe4: rgba(0, 45, 76, 1);			/* per Onlinetool aus LAB berechnet, fÃ¼r Edge notwendig */

/* /// weiss /////////////////////////////////////////////////////////////////////////
/* Alle Varianten von weiÃŸ

CMYK: 0 / 0 / 0 / 0
RGB: 255 / 255 / 255
HEX: ff / ff / ff

Verwendet fÃ¼r:
- Standardtext (html)
- Standardfarbe fÃ¼r nicht ausgezeichnete Links
- Top-Button Pfeil

*/
--schrift-std: #ffff;					/* Standardschrift = weiÃŸ */
--navi-aktiv: #ffff;					/* Navi Farbe fÃ¼r aktive Seite &amp; Mouseover = weiss */ 

/* Top-Button */
--top-button-hg: #fff3;					/* Kreisfarbe: WeiÃŸ transparent */
--top-button-hg: #0008;					/* Kreisfarbe: WeiÃŸ transparent */

/* Projekte Hintergrund */
--projekt-hg: #fffd;					/* Kachel-HG = weiÃŸ leicht Transparent, so dass ein Farbstich entsteht */
--projekt-info-hg: #fffd;				/* Hintergrund fÃ¼r Projektinfo --&gt; ZufÃ¤llig wie Projekt-HG */
--referenz-hover-hg: #ffff;				/* Hintergrund von Logo bei Mousover (= z.z. nicht in Gebrauch) */


/* Footer
transparente TÃ¶ne um farblich passende Abdunklungen der Schriftfarbe zu erzielen

*/
--schrift-footer: #fff8;				/* weiÃŸ, 50% transparent, damit Grauton sich an HG anpasst */
--footer-copyright: #fff4;				/* weiÃŸ, 75% transparent */


/* /// SCHWARZ /// */

/* Footer
transparente TÃ¶ne um farblich passende Abdunklungen des Hintergrunds zu erzielen
*/
--footer-hg: #0008;						/* Schwarz 25% transparent, damit sich Farbton an Standard-HG anpasst */


/* /// SCHLAGSCHATTEN /// */
--schatten-stark: #001d;				/* fÃ¼r dunkleren Schlagschatten */
--schatten-schwach: #0018;				/* fÃ¼r helleren Schlagschatten*/


/* ///  GRUNDFARBEN  ////////////////////////////////////////////////////////////// */
--weiss: #ffff;
--weiss-tr: #fff8;
--rot: #f00f;
--gruen: #0f0f;
--blau: #00ff;
--gelb-rgb: #ff0f;
--cyan: #07a1e2ff;
--magenta: #c60086ff;
--gelb: #fbf312ff;
--schwarz: #000f;

--testhg: #f004;

}


.hintergrund-verlauf {
	background-image: linear-gradient(var(--farbe4) 5rem, var(--farbe4));
}

.farbe1 {color: var(--farbe1);}
.farbe2 {color: var(--farbe2);}
.farbe4 {color: var(--farbe4);}
.farbe4-hg {background-color: var(--farbe4);}

/* ///  GRUNDFARBEN KLASSEN  ////////////////////////////////////////////////////// */
.weiss {color: var(--weiss);}
.weissbg {background-color: var(--weiss);}

.schwarz {color: var(--schwarz);}
.schwarzbg {background-color: var(--schwarz);}

.rot {color: var(--rot);}
.rotbg {background-color: var(--rot);}

.gruen {color: var(--gruen);}
.gruenbg {background-color: var(--gruen);}

.blau {color: var(--blau);}
.blaubg {background-color: var(--blau);}

.gelb-rgb {color: var(--gelb-rgb);}
.gelb-rgb-bg {background-color: var(--gelb-rgb);}

.gelb {color: var(--gelb);}
.gelbbg {background-color: var(--gelb);}

.cyan {color: var(--cyan);}
.cyanbg {background-color: var(--cyan);}

.magenta {color: var(--magenta);}
.magentabg {background-color: var(--magenta);}

.testfarbe {color: var(--testhg);}
.testfarbe-bg {background-color: var(--testhg);}










/*----------------------------------------------------------------------------------*/
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  TOP-BUTTON  /////////////////////////////////////////////////////////////// */
/* ///  komplett    /////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  BUTTON  /////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
#top-button {
/* Variablen */
	--top-button-pos: 2rem;
/* Grundlagen */
	position: fixed;
	position: -webkit-sticky;													/* sticky */
	bottom: 1rem;																/**/
	right: calc( var(--nav-hoehe) * var(--logo-hoehe) * -1 );					/* Anfangsposition auÃŸerhalb des Bildes */
	min-height: calc( var(--nav-hoehe) * var(--logo-hoehe) );
	min-width: calc( var(--nav-hoehe) * var(--logo-hoehe) );
	padding: 0;
	z-index: 4;
/* Aussehen */
	text-align: center;															/* Text zentrieren */
	font-weight: 700;															/* Pfeil fett */
	border-radius: 50%;															/* runde Ecken */
	font-size: 106%;															/* Faktor fÃ¼r KreisgrÃ¶ÃŸe // kein Einfluss auf PfeilgrÃ¶ÃŸe */
	font-size: 106%;															/* Faktor fÃ¼r KreisgrÃ¶ÃŸe // kein Einfluss auf PfeilgrÃ¶ÃŸe */
	background-color: var(--top-button-hg);										/* Farbe des Top-Buttons */
/* Verhalten */
	transition: 0.25s;
	transform-origin: right middle;
/* Pfeil mit Flex positionieren */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  PFEIL  //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

.top-pfeil {
/* Variable LinienstÃ¤rke */
	--b: 0.2em;																	/* border-width --&gt; effektiv die PfeilgrÃ¶ÃŸe */
/* Grundausrichtung */
	position: relative;
	display: inline-block;
	margin: 0;
	padding: var(--b);															/* InnenabstÃ¤nde des Rechtecks = effektiv die PfeilgrÃ¶ÃŸe */
	transform: rotate(45deg);													/* 45Â° (original: 225Â°) = Pfeil zeigt nach oben */
/* Rahmen = Pfeil-Linien */
	border: solid var(--schrift-std);											/* solid = Rahmen (=Pfeil) sichtbar, Farbe = Schriftfarbe */
	border-width: var(--b) 0 0 var(--b);										/* Rahmendicke orul */
	border-radius: calc(0.5 * var(--b)) 0 0 0;									/* Radius fÃ¼r runde Ecken (ol, or, ur, ul) = runde Spitze (halber Radius) */
}

/* Kugeln als gerundete Pfeilenden anlegen */
.top-pfeil::before,
.top-pfeil::after {
	content:"";
	position: absolute;
	width: var(--b);															/* Breite = LinienstÃ¤rke */
	height: var(--b);															/* HÃ¶he = LinienstÃ¤rke */
	border-radius: 50%;															/* runde Ecken = Kreise */
	background-color: var(--schrift-std);										/* Farbe fÃ¼r die Rundungen am Pfeil */
}

/* Kugel oben rechts platzieren */
.top-pfeil::before {
	top: calc(-1 * var(--b));													/* Um den Radius vertikal verschieben (auf Rahmen) */
	right: calc(-0.5 * var(--b));												/* um halben Radius horizontal auf Linienkante verschieben */
}

/* Kugel oben links platzieren */
.top-pfeil::after {
	bottom: calc(-0.5 * var(--b));												/* um halben Radius vertikal auf Linienkante verschieben */
	left: calc(-1 * var(--b));													/* Um den Radius horizontal verschieben (auf Rahmen) */
}










/*----------------------------------------------------------------------------------*/
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  MAIN                      ///////////////////////////////////////////////// */
/* ///  Elemente im Hauptfenster  ///////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

.icon
{
	margin-right: 0.5rem;
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  MAIN ////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* Seitenkopf (Seitentitel) */
.head {
/*	background-color: #fff3;								/* Testhintergrund */
	position: relative;
	top: 0;
	left: calc( var(--margin-h) * -1 );											/* ums padding von main wieder raus verschieben */
	padding: 0 var(--margin-h);													/* padding selbst wieder weitergeben */
	width: 100vw;																/* volle Displaybreite */
	min-height: 20vh;															/* MindesthÃ¶he */
	margin: 0;
	overflow: hidden;
/* fÃ¼r Inhalt */
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
}

/* Seitenkopf homepage (Bild) */
#home .head {
	background-color: var(--top-button-hg);										/* Testhintergrund */
/* Hintergrundbild */
	background-image: url("../Abbildungen/Titelbild.jpg");						/* Bild-URL */
	background-image: url("../Abbildungen/Titelbild_Origami_05.jpg");			/* Bild-URL */
	background-image: url("../Abbildungen/Titelbild_Origami_01.jpg");			/* Bild-URL */
	background-image: url("../Abbildungen/Titelbild_Tropfen_02.jpg");			/* Bild-URL */
	background-image: url("../Abbildungen/Titelbild_Tropfen_03.jpg");			/* Bild-URL */
	background-image: url("../Abbildungen/Titelbild_Origami_04.jpg");			/* Bild-URL */
	background-attachment: fixed;												/* fest positionieren */
	background-repeat: no-repeat;												/* keine Bildwiederholung */
/*	background-position: center center;											/* Ausrichtung im Container */
/*	background-position: 50% 100%;												/* Ausrichtung im Container */
	background-position: 50% top;												/* Ausrichtung im Container */
/*	background-size: fit;														/* flÃ¤chenfÃ¼llend, auch Ã¼berlaufend */
	background-size: cover;														/* flÃ¤chenfÃ¼llend, auch Ã¼berlaufend */
/* HÃ¶he */
	height: 80vh;
}

#home .head h1 {
	margin-top: 0;
}

.header-video {
	position: relative;
	top: 0;
	left: 0;
	z-index: -1;
}










/*----------------------------------------------------------------------------------*/
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  GALLERIE  ///////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */



/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  RAHMEN  /////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* /// ALLGEMEIN /// */
.gallerie
{
/* Variablen */
	--n-spalten: 2;																/* Variable fÃ¼r Spaltenzahl */
	--height-max: auto;															/* Variable fÃ¼r maximale ZeilenhÃ¶he */
	--gap: 1rem;																/* Variable fÃ¼r AbstÃ¤nde */
/* Allgemein */
	position: relative;
	top: 0;
	left: 0;
/* GRID */
/* Grid-Eigenschaften */
	display: grid;																/* Raster erzeugen */
	grid-template-columns: repeat(var(--n-spalten), 1fr);						/* Anzahl der Spalten = variabel &amp; Alle Spalten sind gleich breit */
	grid-auto-rows: minmax(
		var(--height-min),
		var(--height-max)
	);																			/* beliebig viele Zeilen */
	gap: var(--gap);															/* Abstand Zellen per Variable definiert */
/*	display: inline-block;														/*  */
	width: 100%;
	margin:
		calc(var(--zeilenabst) * 2)												/* oben &amp; unten doppelter Zeilenabtand */
		auto																	/* links &amp; rechts automatisch (= zentriert) */
	;
	padding: 0;
	overflow: hidden;
}

/* /// LOGOS /// */
#referenzen .gallerie
{
/* Variablen */
	--n-spalten: 5;
	--gap: 2rem;
}



/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  KACHEL  /////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* /// PROJEKTE UND REFERNZEN /// */
.projekt-container,
.ref-container
{
	position: relative;															/**/
	width: 100%;
/*	max-height: 26rem;															/* maximale HÃ¶he (Ã¼berschreibt SeitenverhÃ¤ltnis) */
	aspect-ratio: 4/3;															/* SeitenverhÃ¤ltnis festlegen */
/* Aussehen */
	background-color: var(--projekt-hg);										/* Hintergrundfarbe als NotlÃ¶sung */
	overflow: hidden;
/* zur Ausrichtung des Bildes */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
/*	box-shadow: 0 0.25rem 1rem var(--schatten-schwach);							/* Schlagschatten auÃŸen */
}

/* /// REFERENZEN /// */
.ref-container {
	background: transparent;													/* transparenter HG fÃ¼r Logos */
/*	background: #f002;															/* Testhintergrund */
	aspect-ratio: 6/4;
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  VORDERSEITE  ////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* ///  PROJEKTBILD  ////////////////////////////////////////////////////////////// */
.projekt-bild
{
	display: block;
	max-width: 80%;
	min-width: 50%;
	max-height: 80%;
	min-height: 50%;
	object-fit: cover;															/* SeitenverhÃ¤ltnis beibehalten, Bildrahmen fÃ¼llen */
	object-fit: contain;															/* SeitenverhÃ¤ltnis beibehalten, Bildrahmen fÃ¼llen */
}

/* ///  REFERENZEN LOGOS  ///////////////////////////////////////////////////////// */
.ref-bild,
.ref-bild-v,
.ref-bild-h
{
/*	border: 1px solid white;													/* Testrahmen */
	display: block;
	max-width: 70%;
	min-width: 50%;
	max-height: 45%;
	min-height: 30%;
	object-fit: contain;
	box-shadow: none;
	opacity: 1;																	/* AusgangsopazitÃ¤t fÃ¼r Animation */
	scale: 0.9;																	/* AusgangsgrÃ¶ÃŸe fÃ¼r Animation */
}

/* VergrÃ¶ÃŸerung sehr breiter Logos */
.logo-breiter
{
	max-width: 100%;
}
/* VergrÃ¶ÃŸerung sehr hoher Logos */
.logo-hoeher
{
	max-height: 60%;
}
/* Verkleinerung besonders hoher Logos */
.logo-niedriger
{
	max-height: 40%;
}
/* RÃ¼ckseite (positives Logo) unsichtbar */
.ref-container-h
{
	opacity: 0;
}



/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  RÃœCKSEITE  //////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* ///  ALLGEMEIN  //////////////////////////////////////////////////////////////// */
.projekt-info,
.ref-container-h
{
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;																	/* ganz rechts platzieren */
	height: 100%;																/* volle HÃ¶he */
	width: 90%;																	/* Breite von Infokarte */
/* Aussehen */
	background-color: #f002;													/* Testhintergrund */
	background-color: var(--projekt-info-hg);									/* Hintergrundfarbe fÃ¼r Infokarte */
/* Verhalten */
/* fÃ¼r alte Browser */
	-webkit-transform: translateX(100%);										/* Anfangsposition auÃŸerhalb des Rahmens rechts (100% versetzt) */
	-moz-transform: translateX(100%);											/*  */
	-ms-transform: translateX(100%);											/*  */
	-o-transform: translateX(100%);												/*  */
/* Standard */
	transform: translateX(100%);												/* Anfangsposition auÃŸerhalb des Rahmens rechts (100% versetzt) */
/* zur Ausrichtung des Textfelds */
	display: flex;
	flex-direction: row;
	justify-content: start;														/* in Flexrichtung linksbÃ¼ndig */
	align-items: center;														/* normal zur Flexrichtung zentrieren */
}

/* ///  PROJEKTE INFO  //////////////////////////////////////////////////////////// */

/* Textfeld = Container zur Textausrichtung */
.projekt-text
{
	margin: 0 2rem;
/* Aussehen */
/*	background-color: #f002;													/* Testhintergrund */
}

/* Ãœberschrift in Textfeld */
.projekt-text h3
{
	font-size: var(--h3-schriftgrad);											/**/
	line-height: 1.75rem;														/* Zeile:Schriftgrad = 7:6 */
}

/* Textelemente */
.projekt-text h3,
.projekt-text p,
.projekt-text a																	/* globale Linkfarbe Ã¼berschreiben */
{
	color: var(--farbe4);
}

.projekt-text a:hover
{
	color: var(--farbe4);														/* Farbe bei Hover verhindern (solange Links tot sind) */
}

.projekt-text p
{
	margin: 0
}

.projekt-text p:first-of-type
{
	font-weight: 600;															/* halbfett */
}

.projekte-text &gt; p &gt; a
{
	pointer: cursor;
}

.projekt-text &gt; p &gt; a:not(:first-child)::before
{
	content: ' | ';
	color: var(--farbe1);
}

.projekt-text &gt; p &gt; a.taten:not(:first-child)::before
{
	content: ' || ';
	color: var(--farbe1);
}

/* ///  REFERENZEN LOGOS  ///////////////////////////////////////////////////////// */
.ref-container-h
{
	background: transparent;													/* Hintergrund transparent */
	width: 100%;																/* volle Breite wiederherstellen */
	top: 0;
	left: 0;
	opacity: 0;
/* Verhalten */
	/* fÃ¼r alte Browser */
	-webkit-transform: translateX(0);											/* Anfangsposition normal (verschieben aufheben) */
	-moz-transform: translateX(0);												/*  */
	-ms-transform: translateX(0);												/*  */
	-o-transform: translateX(0);												/*  */
	/* Standard */
	transform: translateX(0);													/* Anfangsposition normal (verschieben aufheben) */
/* zur Ausrichtung des Textfelds */
	justify-content: center;																		/* in Flexrichtung linksbÃ¼ndig */
	align-items: center;														/* normal zur Flexrichtung zentrieren */
}



/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  HOVER  //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* Checkbox nicht anzeigen */
.checkbox-projekt
{
	display: none;
}

/* Infokarte bei hover hereingleiten lassen bei hover */
/* Klasse .hover erforderlich */
.projekt-container .hover:hover .projekt-info
{
/* fÃ¼r alte Browser */
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
/* Standard */
	transform: translateX(0);
}

/* fixiert die per hover aufgerufenen Infokarten mittels Klick */
.checkbox-projekt:checked ~ .projekt-info
{
/* fÃ¼r alte Browser */
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
/* Standard */
	transform: translateX(0);
}

/* versteckt die Infokarte automatisch bei mouseout */
/*.projekt-container:not(:hover) .projekt-info,*/
.checkbox_projekt:not(:checked) ~ .projekt-info
{
/* fÃ¼r alte Browser */
	-webkit-transform: translateX(100%);					/* Anfangsposition auÃŸerhalb des Rahmens rechts (100% versetzt) */
	-moz-transform: translateX(100%);						/*  */
	-ms-transform: translateX(100%);						/*  */
	-o-transform: translateX(100%);							/*  */
/* Standard */
	transform: translateX(100%);							/* Anfangsposition auÃŸerhalb des Rahmens rechts (100% versetzt) */
}

/* positives Logo anzeigen bei hover */
/*.ref-container:hover .projekt-info*/
.ref-container:hover .ref-container-h
{
	opacity: 1;
	scale: 1;												/* Logo bei hover wachsen lassen */
	background-color: var(--referenz-hover-hg);				/**/
	box-shadow: 0 0.25rem 1rem var(--schatten-schwach);		/* Schlagschatten auÃŸen */
}

.ref-container:hover .ref-bild-v
{
	opacity: 0;												/**/
	scale: 1;
}

.ref-container.schatten:hover
{
	box-shadow: 0 0.25rem 1rem var(--schatten-schwach);		/* Schlagschatten auÃŸen */
}

/* Animationsdauer und Verlauf fÃ¼r alle Gallerieelemente */
.projekt-info,
.projekt-bild,
.ref-container-h,
.ref-bild-v,
.ref-bild-h
{
/* fÃ¼r alte Browser */
	-webkit-transition: 500ms ease;
	-moz-transition: 500ms ease;
	-ms-transition: 500ms ease;
	-o-transition: 500ms ease;
/* Standard */
	transition: 600ms ease;
}




/* LINK EINBAUEN??? */
/* VERTIKALES POPUP EINBAUEN? */










/*----------------------------------------------------------------------------------*/
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  MEDIEN                             //////////////////////////////////////// */
/* ///  Alle Medienformate auÃŸer Gallerie  //////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

.bilderrahmen
{
	width: 100%;
	background-color: #f002;													/* Testhintergrund */
/* Verhalten von Kindelementen */
	display: flex;
	justify-content: flex-end;
/*	flex-direction: row;
	align-items: start;*/
}




/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  TEAM  ///////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* ///  ALLG  ///////////////////////////////////////////////////////////////////// */

.teambild img,
.teamtext,
.nebenContainer
{
	width: 100%;
	padding: 0;
	margin: 0;
	margin-top: var(--zeilenabst);
}

/* ///  BILD  ///////////////////////////////////////////////////////////////////// */

.teambild
{
	display: block;
	margin: 0 auto;
	width: 90%;
    caption-side: bottom;
}

.teambild figcaption
{
    text-align: end;
    line-height:0.7rem;
    font-size: 0.8rem;
}

/* ///  TEXT  ///////////////////////////////////////////////////////////////////// */


.nebenContainer {

	display: flex;											/* Anzeige der Kindelemente */
	flex-direction: row;									/* Ausrichtung der Kindelemente: horizontal */
/*	flex-wrap: wrap;										/* Kindelementen Zeilenumfluss ermÃ¶glichen */
	justify-content: space-between;							/* Kindelemente in FlieÃŸrichtung sortieren */
	align-items: flex-start;								/* Kindelemente normal zur FlieÃŸrichtung sortieren */
}

.nebenElement {
	width:49%;
}





/*----------------------------------------------------------------------------------*/
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  TYPOGRAPHIE                       ///////////////////////////////////////// */
/* ///  alles, auÃŸer in html definiertes  ///////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  ALLGEMEIN  //////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* ///  SCHRIFTSCHNITTE  ////////////////////////////////////////////////////////// */

/* /// StÃ¤rken */
.duenn {font-weight: 100;}							/* dÃ¼nn */
.extra-leight {font-weight: 200;}					/* extra leicht */
.leicht {font-weight: 300;}							/* leicht */
.normal {font-weight: 400;}							/* normal */
.medium {font-weight: 500;}							/* medium */
.halbfett {font-weight: 600;}						/* halbfett */
.fett {font-weight: 700;}							/* fett */
.extra-fett {font-weight: 800;}						/* extra fett */
.schwarz {font-weight: 900;}						/* schwarz */

/* /// Kursiv */
.kursiv {font-style: italic;}

/* ///  AUSZEICHNUNGEN  //////////////////////////////////////////////////////////// */

/* Sprachliche Betonung */
em {
	font-style: italic;								/* kursiv darstellen */
}

/* Inhaltliche Betonung */
strong {
	font-weight: 600;								/* halbfett darstellen */
}

/* AnfÃ¼hrungszeichen */
q {quotes: "â€ž" "â€œ" "â€š" "â€˜";}
.en q, q.en {quotes: "â€œ" "â€" "â€˜" "â€™";}


q {
	quotes: "Â»" "Â«" "â€º" "â€¹";
}

.en q, q.en
{
	quotes: "Â«" "Â»" "â€¹" "â€º";
}

/* Zahlenformate */
.medieval-z
{
	font-feature-settings: "onum" 1;											/* MediÃ¤valziffern */
	font-variant-numeric: oldstyle-nums;										/* MediÃ¤valziffern */
}
.normal-z
{
	font-feature-settings: "lnum" 1;											/* Normale Ziffern */
	font-variant-numeric: normal;												/* Normale Ziffern */
}

/* ///  GROÃŸ- UND KLEINBUCHSTABEN  //////////////////////////////////////////////// */

.versal {
	text-transform: uppercase;
}

.kleinbuchstaben {
	text-transform: lowercase;
}

/* ///  HOCH- UND TIEFGESTELLT  /////////////////////////////////////////////////// */

/* /// Resets */
sup,
sub
{
	vertical-align: baseline;						/* VerÃ¤nderung der ZeilenhÃ¶he verhindern */
}

/* /// angepasst */
.hochgestellt,
.tiefgestellt
{
	font-size: 70%;
	line-height: 0;
}

.tiefgestellt {	vertical-align: -0.25rem;}
.hochgestellt {	vertical-align: 0.4rem;}


/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  ÃœBERSCHRIFTEN  //////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */


/* ///  HAUPT  //////////////////////////////////////////////////////////////////// */

h1,
h2,
h3
{
	margin-top: 3rem;										/* Abstand davor */
	font-weight: 700;										/* fett */
	break-after: avoid;										/* Umbruch vor Ãœberschrift, nicht danach */
}

h1
{
	position: relative;
	font-size: var(--h1-schriftgrad);
	line-height: var(--h1-zeilenabst);						/* Zeile:Schriftgrad = 6:5 */
}

h2
{
	font-size: var(--h2-schriftgrad);
	line-height: var(--h2-zeilenabst);						/* Zeile:Schriftgrad = 6:5 */
}

h3
{
	font-size: var(--h3-schriftgrad);						/**/
	line-height: var(--h3-zeilenabst);						/* Zeile:Schriftgrad = 6:5 */
}

/* spezielle AbstÃ¤nde */
h1 + p,
h2 + p,
h3 + p
{
	margin-top: var(--zeilenabst);							/* Abstand Absatz zur Ãœberschrift */
	break-before: avoid;									/* Umbruch nach Absatz direkt nach Ãœberschriften */
/*	background-color: #0f04;								/* Testhintergrund */
}

h1 + h2,
h2 + h3,
.subtitel + h2,
.subtitel + h3
{
	margin-top: var(--zeilenabst);							/* Abstand zwischen Ãœberschriften */
}


/* ///  UNTER  //////////////////////////////////////////////////////////////////// */

.subtitel
{
	margin-top: 0;											/* Abstand zur Ãœberschrift aufheben */
	font-weight: 600;										/* halbfett */
}

.subtitel + p
{
	margin-top: var(--zeilenabst);							/* Abstand zu UnterÃ¼berschrift */
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  ABSÃ„TZE  ////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

p {
	width: 100%;
	widows: 2;												/* Hurenkinder vermeiden */
	orphans: 2;												/* Schusterjungen vermeiden */
}

.absatz
{
	margin-top: var(--zeilenabst);
}

p.einzug::before {
	content: '';
	display: inline-block;
	width: var(--zeilenabst);
}

.zweispaltig {
	width: 100%;
/*	background-color: #f008;								/* Testhintergrund */
	columns: 2;
	column-gap: 1.5rem;
}

h1 + .zweispaltig,
h2 + .zweispaltig,
h3 + .zweispaltig,
.subtitel + .zweispaltig
{
	margin-top: var(--zeilenabst);
}

.zweispaltig p {
	width: 100%;
}

.halb {
	width: 50%;
	left: 0;
}

/* ///  IMPRESSUM  //////////////////////////////////////////////////////////////// */

.verantwortlich {
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: start;
	align-items: start;
}

.person {
	display: inline-block;
	width: 30rem;
	min-width: 20rem;
}

.einzug-kategorie {
	display: inline-block;
	padding-left: 0.4rem;
}

.kategorie {
	display: flex;
	align-items: start;
	flex-direction: row;
}

/* ///  UMBRÃœCHE  / /////////////////////////////////////////////////////////////// */

.desktop
{
	display: inline;										/* Umbruch auf breiten Displays erzwingen */
}

.mobil
{
	display: none;											/* Umbruch fÃ¼r schmale Displays unterdrÃ¼cken */
}

.schmalesDisplay {
	display: none;
}




/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  LINKS  //////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* /// GLOBAL ///////////////////////////////////////////////////////////////////// */
a
{
	color: var(--schrift-std);
}

a:hover
{
	color: var(--farbe1);
}

.alt {
	font-family: 'Avenir Next LT Pro';
}

/* /// IM FLIESSTEXT ////////////////////////////////////////////////////////////// */

a.link,
.link a
{
	color: var(--farbe1);
}

a.link:hover,
.link a:hover
{
	color: var(--farbe2);
}

/* ///  BUTTON  /////////////////////////////////////////////////////////////////// */

button,
.button
{
	background-color: var(--farbe1);							/* Rahmenfarbe = Akzentfarbe */
	color: var(--farbe4);										/* Textfarbe = Hintergrundfarbe */
	font-weight: 600;											/* halbfetter Schnitt (sieht wie "normal" aus) */
	padding: 0.5rem 0.8rem;										/* Fleisch um Text */
	border-radius: 1.5rem;										/* runde Ecken */
	break-inside: avoid;
	width: calc( var(--breite) * 100% );						/* Formel, um Buttonbreite zu berechnen / Ohne Faktor-Klasse inhaltsbasierte Breite */
/* Verhalten */
	transition: 250ms;											/* Ãœbergangszeit zu Hovereffekt */
}

button:hover,
.button:hover
{
	color: var(--weiss);
}

button a,
button:hover a,
.button a,
.button:hover a
{
	color: inherit;
}

/* Faktoren, um die Breite eines Buttons zu bestimmen */
.breite2tel {--breite: 0.5;}
.breite3tel {--breite: 0.33;}
.breite4tel {--breite: 0.25;}
.breite6tel {--breite: 0.16;}
.breite8tel {--breite: 0.125;}




/* ///  KONTAKT  ////////////////////////////////////////////////////////////////// */

a.tel::after,
a.mail::after
{
	display: inline-block;
	content: '|';
	color: var(--farbe1);									/* Farbe Trennzeichen zwischen Infos */
	margin: 0 0.5rem;
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  HERVORHEBUNGEN  /////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

.wie-h2,
.wie-h3
{
	display: block;											/* in eigene Zeile stellen */
	font-weight: 700;										/* Schriftschnitt fett */
	margin: var(--zeilenabst) 0;							/* drÃ¼ber und drunter Zeilenabstand */
}

.wie-h2
{
	font-size: var(--h2-schriftgrad);						/* Schriftgrad wie H2 */
	line-height: var(--h2-zeilenabst);						/* Zeilenabstand wie H2 */
}

.wie-h3
{
	font-size: var(--h3-schriftgrad);						/* Schriftgrad wie H3 */
	line-height: var(--h3-zeilenabst);						/* Zeile:Schriftgrad = 7:6 */
}

.firmenname
{
	font-weight: 300;
}

/* Vorspann */
.vorspann {
	color: var(--farbe1);
}

.vorspann a.link,
.vorspann .link a
{
	color: var(--weiss);
}

.vorspann a.link:hover,
.vorspann .link a:hover
{
	color: var(--farbe2);
}


/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  ABSTÃ„NDE  ///////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* ///  ALLG  ///////////////////////////////////////////////////////////////////// */

div :first-child
{
	margin-top: 0;
}

.abstand {
	margin-top: var(--zeilenabst);
}

.doppelterAbstand
{
	margin-top: calc( var(--zeilenabst) * 2 );				/* Doppelter Zeilenabstand davor */
}


/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  POSITIONIERUNG  /////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

.mittig
{
	margin: auto;
/*	background-color: #f002;								/* Testhintergrund */
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  LISTEN  /////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* ///  ALLG  ///////////////////////////////////////////////////////////////////// */

ol,
ul
{
	margin-top: var(--zeilenabst);							/* Abstand vor Liste = Zeilenabstand */
	list-style-position: outside;							/* AufzÃ¤hlungszeichen nicht Teil von Listenpunkt */
	padding: 0rem;											/* kein Einzug links */
}

li
{
	display: table-row;										/* Listenpunkte als Block anzeigen --&gt; unterdrÃ¼ckt originÃ¤re(s) AufzÃ¤hlungszeichen/-nummer */
}

li::before
{
	display: table-cell;									/* dadurch werden AbstÃ¤nde und EinzÃ¼ge von ::before wirksam */
	color: var(--farbe1);									/* Farbe fÃ¼r AufzÃ¤hlungszeichen bzw. Nummerierung */
}


/* /// ABSTÃ„NDE /// */

/* Keine AbstÃ¤nde vor Sub-Listen */
ol ol,
ol ul,
ul ol,
ul ul
{
	margin-top: 0;
}

/* doch ein Abstand vor Sub-Liste */
ol.abstandL &gt; li &gt; ol,
ol.abstandL &gt; li &gt; ul,
ul.abstandL &gt; li &gt; ol,
ul.abstandL &gt; li &gt; ul
{
	margin-top: var(--zeilenabst);
}

/* Abstand zwischen Punkten einer Liste */
.abstandLi &gt; li::before
{
	padding-top: var(--zeilenabst);
}

/* /// Spalten /// */



/* ///  UNSORTIERTE LISTEN  /////////////////////////////////////////////////////// */

ul &gt; li::before {
	content: "\25b6";										/* 25b6 = CSS Code/unicode fÃ¼r Dreieckpfeil nach rechts */
	content: "\2022";										/* 2022 = CSS Code/unicode fÃ¼r StandardaufzÃ¤hlungszeichen */
	padding: 0 0.8rem 0 0;
/*	background-color: #0f01;								/* HG Farbe fÃ¼r Testzwecke */
}


ul li {
	list-style-type: circle;
}

/* /// KORREKTUR FÃœR NAVI */



/* ///  KONTAKT  /// */

/* /// AufzÃ¤hlungszeichen */
ul.kontakt li::before {
	font-family: FontAwesome;								/* Iconschrift */
	text-align: left;										/* Text linksbÃ¼ndig */
	font-size: 0.9rem;
	padding-right: 1rem;
}

/* Telefon */
ul.tel li::before
{
	content: "\f095";										/* FontAwesome Unicode fÃ¼r Telefonicon (&amp;#xf095;) */

}

/* E-Mail */
ul.mail li::before
{
	content: "\f0e0";										/* FontAwesome Unicode fÃ¼r E-Mailicon (&amp;#xf0e0;) */
}


/* ///  SORTIERTE LISTEN  /////////////////////////////////////////////////////// */

/* /// ZÃ„HLER ZURÃœCKSETZEN */

/* Ebene 1 */
ol
{
	counter-reset: ListeEbene1;								/* ZÃ¤hler auf Null zurÃ¼cksetzen */
}

/* Ebene 2 */
ul &gt; li ol
{
	counter-reset: ListeEbene2;
}

/* Ebene 3 */
ul ul &gt; li ol
{
	counter-reset: ListeEbene3;
}

/* /// ZÃ„HLER ANHEBEN */

/* Ebene 1 */
ol &gt; li::before
{
	counter-increment: ListeEbene1;							/* ZÃ¤hler um eins erhÃ¶hen */
	content: counters(ListeEbene1, ".") "";					/* Trennzeichen zwischen Ebenen (.) und Zeichen danach ("") */
	padding-right: 0.7rem;
}

/* Ebene 2 */
ul ol &gt; li::before
{
	counter-increment: ListeEbene2;
	content: counters(ListeEbene2, ".") "";
}

/* Ebene 3 */
ul ul ol&gt;li::before
{
	counter-increment: ListeEbene3;
	content: counters(ListeEbene3, ".") "";
}

/* /// ABSTAND DAVOR */

ol {
	margin-top: 0rem;
}
/*
ol &gt; li:not(:first-child)::before
{
	padding-top: 0;
	padding-top: var(--zeilenabst);
}
*/










/*----------------------------------------------------------------------------------*/
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* ///                ///////////////////////////////////////////////////////////// */
/* ///  MEDIAQUERIES  ///////////////////////////////////////////////////////////// */
/* ///                ///////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////////////////////// */










/*----------------------------------------------------------------------------------*/
@media only screen and (max-width: 1200px) {

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  TOP-BUTTON  /////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

#top-button {
/* Variablen */
	--top-button-pos: 5%;
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  GALLERIE  ///////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

#referenzen .gallerie
{
/* GRID */
/* Variablen */
	--n-spalten: 2;											/* Variable fÃ¼r Spaltenzahl */
/*	--height-min: 15rem;									/* Variable fÃ¼r minimale ZeilenhÃ¶he */
/*	--zeilenhoehe: 20rem;									/* Variable fÃ¼r fixe HÃ¶he */
	--height-max: auto;										/* Variable fÃ¼r maximale ZeilenhÃ¶he */
	--gap: 1rem;											/* Variable fÃ¼r AbstÃ¤nde */
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  TEAM                               //////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

.teamtext .allg
{
	display: block;
	width: 100%;
	background-color: #fff2;
}

.nebenContainer {
	flex-direction: column;
	justify-content: flex-start;
}

.nebenElement {
	width: 100%;
	margin-top: var(--zeilenabst);
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  MAIN                      ///////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

/* var(--margin-h) */


/* Seitenkopf homepage (Bild) */
#home .head {
	background-position: 70% 0%;							/* Ausrichtung im Container fÃ¼r Tropfen */
	background-position: 80% 0%;							/* Ausrichtung im Container fÃ¼r Origami */
/* HÃ¶he */
	height: 80vh;
	margin-bottom: var(--zeilenabst);
}



/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  TYPOGRAPHIE  ////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

.halb {
	width: 100%;
}

/* ///  IMPRESSUM  //////////////////////////////////////////////////////////////// */

.verantwortlich {
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: start;
	align-items: start;
/* Verzweiflungsangabe */
	font-size: 1rem;
}

.person {
	margin-top: var(--zeilenabst);
	width: 100%;
	min-width: 30rem;
}

/* ///  UMBRÃœCHE  / /////////////////////////////////////////////////////////////// */

.desktop
{
	display: none;											/* Umbruch fÃ¼r breite Displays unterdrÃ¼cken */
}

.mobil
{
	display: inline;										/* Umbruch auf schmalen Displays erzwingen */
}


/* Endklammer mediaQuery 1200px */
}










/*----------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {










/*----------------------------------------------------------------------------------*/
/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  MAIN  ///////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

.head
{
	overflow: hidden;
	left: calc(var(--margin-h) * -1);
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  KONTAKT  ////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

.kontakt h2 {font-size: 0.9em;}

/* Umbruch, falls nÃ¶tig, zwischen Name und Telefonnummer */
.name
{
	display: inline-block;
	white-space: pre-line;
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  GALLERIE  ///////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

.gallerie,
#referenzen .gallerie
{
/* GRID */
/* Variablen */
	--n-spalten: 1;											/* Variable fÃ¼r Spaltenzahl */
/*	--height-min: 15rem;									/* Variable fÃ¼r minimale ZeilenhÃ¶he */
/*	--zeilenhoehe: 20rem;									/* Variable fÃ¼r fixe HÃ¶he */
	--height-max: auto;										/* Variable fÃ¼r maximale ZeilenhÃ¶he */
	--gap: 1rem;											/* Variable fÃ¼r AbstÃ¤nde */
}

/* ///  PROJEKTE INFO  //////////////////////////////////////////////////////////// */

/* Textfeld = Container zur Textausrichtung */
.projekt-text
{
	margin: 0 1em;
/*	background-color: #f002;													/* Testhintergrund */
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  TEAM  ///////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

.teambild {
	width: 100%;
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  TYPOGRAPHIE  ////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

.zweispaltig {
	columns: 1;												/* Anzahl der Spalten wieder reduzieren */
}


/* ///  HERVORHEBUNGEN  /////////////////////////////////////////////////////////// */

.firmenname
{
	font-size: 90%;											/* Schrift verkleinert, damit es bei 360px vw einzeilig bleibt */
}

/* //////////////////////////////////////////////////////////////////////////////// */
/* ///  POSITIONIERUNG  /////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////// */

.mittig-mobil
{
	margin: auto;
/*	background-color: #f002;								/* Testhintergrund */
}






/* Endklammer mediaQuery 768px */
}










/*----------------------------------------------------------------------------------*/
@media only screen and (max-width: 400px) {

.schmalesDisplay
{
	display: inline;
}

/* Endklammer mediaQuery 400px */
}




@media (hover: none) {

/* versteckt Infokarte bei erneutem tippen/klicken */
.checkbox_projekt:not(:checked) ~ .projekt-info
{
/* fÃ¼r alte Browser */
	-webkit-transform: translateX(100%);					/* Anfangsposition auÃŸerhalb des Rahmens rechts (100% versetzt) */
	-moz-transform: translateX(100%);						/*  */
	-ms-transform: translateX(100%);						/*  */
	-o-transform: translateX(100%);							/*  */
/* Standard */
	transform: translateX(100%);							/* Anfangsposition auÃŸerhalb des Rahmens rechts (100% versetzt) */
}



/* Endklammer mediaquery */
}
</pre></body></html>