/*
===============================================================================
FOLKWANG FINALE THEME – MAIN STYLESHEET
Structured CSS with sections and a documented table of contents.

TABLE OF CONTENTS
  1. TOKENS (Design variables)
     1.1 Colors
     1.2 Spacing
     1.3 Typography
     1.4 Z-Index / Radii / Shadows
  2. BASE (Resets and element defaults)
  3. LAYOUT (Containers, grid, sections)
  4. UTILITIES (Helpers: spacing, display, text, visibility, effects)
  5. COMPONENTS (Buttons, cards, nav, forms, media)
  6. PAGES (Page-specific overrides)

Notes
  - Naming convention: BEM for components (e.g., .card, .card__header, .card--highlight)
    and utility prefixes for helpers (e.g., .u-mt-16, .u-text-center, .u-flex).
  - Mobile-first approach: define base styles first, then enhance in media queries.
  - Keep selector specificity low; avoid !important where possible.
===============================================================================
*/

/* ============================================================================
   1. TOKENS (Design variables)
   1.1 Colors
   ============================================================================ */
:root {
	/* Primary palette */
	--color-primary: #0a7be7;
	--color-primary-contrast: #ffffff;
	--color-secondary: #222222;
	--color-accent: #ffb800;

	/* Greys */
	--color-grey-100: #f7f7f7;
	--color-grey-200: #eeeeee;
	--color-grey-300: #dddddd;
	--color-grey-800: #333333;

	/* Status */
	--color-success: #2aa775;
	--color-warning: #e8a400;
	--color-danger: #dc3545;

	/* Backgrounds & text */
	--color-bg: #ffffff;
	--color-text: #111111;
}

/* ============================================================================
   1.2 Spacing (rem-based scale)
   ============================================================================ */
:root {
	--space-0: 0;
	--space-4: 0.25rem;
	--space-8: 0.5rem;
	--space-12: 0.75rem;
	--space-16: 1rem;
	--space-24: 1.5rem;
	--space-32: 2rem;
	--space-48: 3rem;
	--space-64: 4rem;
}

/* ============================================================================
   1.3 Typography
   ============================================================================ */
:root {
	--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
		Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
	--font-size-100: 0.875rem; /* 14px */
	--font-size-200: 1rem;     /* 16px */
	--font-size-300: 1.125rem; /* 18px */
	--font-size-400: 1.25rem;  /* 20px */
	--line-height-base: 1.5;
}

/* ============================================================================
   1.4 Z-Index / Radii / Shadows
   ============================================================================ */
:root {
	--z-base: 1;
	--z-dropdown: 1000;
	--z-sticky: 1020;
	--z-modal: 1050;

	--radius-2: 2px;
	--radius-4: 4px;
	--radius-8: 8px;

	--shadow-1: 0 1px 2px rgba(0,0,0,0.06);
	--shadow-2: 0 4px 12px rgba(0,0,0,0.12);
}

/* ============================================================================
   2. BASE (Resets and element defaults)
   - html, body, typography base, links, images
   - Keep minimal; prefer utilities for exceptions
   ============================================================================ */
/* Box-sizing model */
html { box-sizing: border-box; }
*, ::before, ::after { box-sizing: inherit; }

/* Typography base */
body, #html-body, h1, h2, h3, h4, h5 {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Element defaults */
img { max-width: 100%; height: auto; border: 0; }
figure { display: table; margin: 1em 0; }
figure figcaption {
	caption-side: bottom;
	font-size: 13px;
	font-size: 0.8125rem;
	font-style: italic;
	line-height: 1.4em;
	margin-top: 5px;
	color: #666;
	margin: 0.8075em 0;
	width: 100%;
}

#html-body, h1, h2, h3, h4, h5 {
	/* default font */
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Simple margin reset for common blocks */
address, dl, fieldset, figure, ol, p, pre, ul { margin: 0; }

/* Selection color */
::selection { background: #000; color: #fff; text-shadow: none; }

/* ============================================================================
   3. LAYOUT (Containers, grid, sections)
   - Site-wide wrappers, grids, spacing around header/main/footer
   ============================================================================ */
/* Grid containers */
.id-grid-container,
.id-layout-grid-container {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 16px;
	grid-row-gap: 0;
	align-items: stretch;
	word-break: break-word;
	width: 100%;
}

.id-grid-container-small,
.id-layout-grid-container-small {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-column-gap: 16px;
	grid-row-gap: 0;
	align-items: stretch;
	word-break: break-word;
	width: 100%;
}

.id-intern-journal { grid-template-columns: repeat(3, 1fr); }

.id-layout-grid-container,
.id-layout-grid-container-small { padding-left: 8px; padding-right: 8px; }

/* Section paddings */
.header-section { padding: 0 56px; }
.header-section { padding: 0; }
.journal-section { padding: 16px 56px 0 56px; }
.project-section { padding: 16px; }
.remove-section-padding { padding: 0; }

/* Layout containers and rows */
.layout-section .layout-container {
	display: flex;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

.layout-row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 0 8px;
}

.row-journal-padding { padding: 0 48px; }
.row-full-height { min-height: 100vh; }
.reverse-row { flex-direction: row; }

/* Columns */
.layout-column {
	position: relative;
	min-height: 1px;
	display: flex;
	padding: 8px;
}
.column-width-100 { width: 100%; }
.column-width-75 { width: 75%; }
.column-width-66 { width: 66.6%; }
.column-width-50 { width: 50%; }
.column-width-33 { width: 33.3%; }
.column-width-25 { width: 25%; }
.column-no-padding { padding: 0; }
.column-no-horizontal-padding { padding-left: 0; padding-right: 0; }

/* Responsive layout adjustments */
@media (max-width: 75em) { /* ~1200px */
	.id-grid-container-small,
	.id-layout-grid-container-small { grid-template-columns: repeat(4, 1fr); }
	.id-intern-journal { grid-template-columns: repeat(3, 1fr); }
	.row-journal-padding { padding: 0 8px; }
	.journal-section { padding: 16px 16px 0 16px; }
	.journal-section .id-grid-container { grid-column-gap: 16px; grid-row-gap: 0; }
}

@media (max-width: 60em) { /* ~960px */
	.id-intern-journal { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 40em) { /* ~640px */
	#offcanvas-toggle { display: block; }
	.id-grid-container,
	.id-layout-grid-container {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 2px;
		grid-row-gap: 0;
		width: 100%;
	}
	.id-grid-container-small,
	.id-layout-grid-container-small {
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 2px;
		grid-row-gap: 0;
		width: 100%;
	}
	.id-layout-grid-container,
	.id-layout-grid-container-small { padding-left: 0; padding-right: 0; width: 100%; }
	.id-intern-journal { grid-template-columns: repeat(2, 1fr); }
	.column-width-75,
	.column-width-66,
	.column-width-50 { width: 100%; }
	.column-width-33,
	.column-width-25 { width: 50%; }
}

/* ============================================================================
   4. UTILITIES (Helpers)
   - Spacing, display, text alignment, visibility, effects
   - Low specificity, single-responsibility classes
   ============================================================================ */
/* Example utilities (non-breaking placeholders)
.u-text-center { text-align: center; }
.u-hidden { display: none !important; }
*/

/* ============================================================================
   5. COMPONENTS (Buttons, cards, nav, forms, media)
   - Use BEM: .component, .component__part, .component--modifier
   ============================================================================ */
/* TODO: Extract component blocks from below into this section */

/* ============================================================================
   6. PAGES (Page-specific overrides)
   - Keep these minimal and scoped
   ============================================================================ */
/* TODO: Move page-specific selectors here */

/* ============================================================================
   LAYOUT DRAG AND DROP COMPONENT
   Minimal visual feedback for drag and drop image uploads
   ============================================================================ */

/* Drag feedback for edit-preview-column elements */
.edit-preview-column {
    transition: background-color 0.2s ease, border 0.2s ease;
    min-height: 50px; /* Ensure droppable area even when empty */
}

.edit-preview-column.drag-hover {
    background-color: rgba(30, 135, 240, 0.1);
    border: 2px dashed #1e87f0;
    border-radius: 4px;
}

/* Loading state for layout blocks during upload */
.layout-container.uploading {
    opacity: 0.7;
    pointer-events: none;
}

.layout-container.uploading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* ============================================================================
   EXISTING STYLES (Legacy)
   The following are the legacy styles kept in place. Gradually refactor the
   rules below into the structured sections above without changing behavior.
   ============================================================================ */





#edit-page {
	/* the edit page link that appears when page is editable */
	position: absolute;
	top: 4px;
	right: 10px;
	background-color: rgba(255,255,255,0.5);  
	padding: 5px 10px;
}

#edit-feature{
	/* the edit page link that appears when page is editable */
	position: absolute;
	top: 10px;
	right: calc(50vw - 150px);
	background-color: rgba(255,255,255,0.5);  
	background: #e6e6e6;
	padding: 15px 15px;
	border: 1px dashed #000;
}


#offcanvas-toggle {
	/* the hamburger icon that toggles the mobile navigation */
	position: absolute;
	top: 10px;
	left: 15px; 
}

#offcanvas-nav .uk-search-input {
	/* the search box that appears in offcanvas nav */
	width: 100%;
}

img.uk-comment-avatar {
	/* avatar that appears in comments */
	width: 60px;
	height: 60px; 
}




/****************************************************************
 * Bodycopy text and images
 *
 * These styles are good to have on any ProcessWire site
 *
 */

.align_left {
	/* for images placed in rich text editor */ 
	float: left;
	margin: 0 1em 0.5em 0; 
	position: relative;
	top: 0.5em;
	max-width: 50%; 
}

.align_right {
	/* for images placed in rich text editor */ 
	float: right;
	margin: 0 0 0.5em 1em;
	max-width: 50%; 
}

.align_center {
	/* for images placed in rich text editor */ 
	display: block;
	margin: 1em auto; 
	position: relative;
	top: 0.5em;
}

figure {
	/* figure for image that has a caption */
	display: table;
	margin: 0;
}

figure figcaption {
	/* display caption text below image contained to image width */
	display: table-caption;
	caption-side: bottom;
	font-size: 13px;
	line-height: 1.4em;
	margin-top: 5px;
	color: #777;
}

@media only screen and (max-width: 767px) {
	/* common PW mobile layout adjustments for widths under 768px */ 

	.align_left, .align_right, .align_center {
		/* display images in center rather than aligned */
		display: block;
		float: none; 
		margin: 1em auto;
		max-width: 100%; 
	}
	
	figure,
    figure figcaption {
		/* let figcaption display as wide as needed below image */
	    display: block;
	    text-align: center;
    }
}

.logo_bottom {
    float: left;
}

.datenschutz {
    margin-top: 72px;
    margin-left: 8px;
    float: right;
}

.impressum {
    margin-top: 72px;
    margin-left: 8px;
    float: right;
}

.id-feature-image-height-100 {
    height: 100vh;
}

.id-feature-image-height-100p {
    height: 100%;
}

.id-feature-image-height-100px {
    height: 100px;	
}

.id-feature-image-height-43 {
	     --videoRatio: calc(4 / 3); 
		 --w: 100vw;
		 --h: calc(var(--w) / var(--videoRatio));
    background-color: black;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: calc(var(--w) / var(--videoRatio));
    overflow: hidden;
    position: relative;	
}

.id-feature-image-height-43 > iframe {
    z-index: 50;
	padding: 0;
    margin: 0;
    position: relative;
    top: calc(50% - (var(--h) / 2));
    left: 0;
    width: var(--w);
    height: var(--h);
}

.id-feature-image-height-169 {
	     --videoRatio: calc(16 / 9); 
		 --w: 100vw;
		 --h: calc(var(--w) / var(--videoRatio));
    background-color: black;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: calc(var(--w) / var(--videoRatio));
    overflow: hidden;
    position: relative;	
}

.id-feature-image-height-169 > iframe {
	z-index: 50;
    padding: 0;
    margin: 0;
    position: relative;
    top: calc(50% - (var(--h) / 2));
    left: 0;
    width: var(--w);
    height: var(--h);
}

@media (max-aspect-ratio: 16/9) { /* the viewport is too narrow for the full video */
  .id-feature-image-height-169 > iframe {
    --h: 100vh;
    --w: calc(var(--h) * var(--videoRatio));
    top: 0;
    left: calc(50% - (var(--w) / 2));
  }
}

.id-feature-image-height-card {
    background-color: black;
    padding: 0;
    margin: 0;
    width: 100%;
    height: auto;
	width: 100%; 
	height: calc(100% * 9 / 16);
}

.id-feature-image-height-car {
	     --videoRatio: calc(16 / 9); 
		 --w: 100%;
		 --h: calc(var(--w) / var(--videoRatio));
    background-color: black;
    padding: 0;
    margin: 0;
    width: 100%;
    height: calc(var(--w) / var(--videoRatio));
    overflow: hidden;
    position: relative;	
}
.id-feature-image-height-car > iframe {
	z-index: 50;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.id-feature-image-height-card > iframe {
	z-index: 50;

    padding: 0;
    margin: 0;
    position: relative;
	     --videoRatio: calc(16 / 9);
		 --w: 100%;
		 --h: calc(var(--w) / var(--videoRatio));
    top: calc(50% - (var(--h) / 2));
    left: 0;
    width: var(--w);
    height: var(--h);
	width: 100%; 
	height: calc(100% * 9 / 16);
}

@media (max-aspect-ratio: 16/9) { /* the viewport is too narrow for the full video */
  .id-feature-image-height-car > iframe {
    --h: 100%;
    --w: calc(var(--h) * var(--videoRatio));
    top: 0;
    left: calc(50% - (var(--w) / 2));
  }
}

.id-feature-image-height-80 {
    height: 80vh;
}

.id-feature-image-height-50 {
    height: 50vh;
}

.id-feature-image-height-auto {
    height: 100%;
}

#masthead{
	padding-top:40px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

#masthead-logo img {
	/* image for masthead logo */
	width: 100px;	
}

#headline-folkwang{
	padding-top: 6px;
}

#headline-logo{
	margin-top: -38px;
	height: 80px;
}



#masthead2{
	padding-top:300px;
	padding-bottom:50px;
	height: 50px;
	margin-left: 15px;
	display: block;

}


#masthead-logo2 img {
	/* image for masthead logo */
	width: 100px;	
}

#headline-folkwang2{
	padding-top: 6px;
}

#headline-logo2{
	margin-top: -38px;
	height: 80px;
}

















/*--------------------------------------------------------------
21.1 Grid System General
--------------------------------------------------------------*/
.id-grid-container, .id-layout-grid-container{
    grid-template-columns: repeat(4,1fr);
    display: grid;
	grid-column-gap: 16px;
	grid-row-gap: 0px;

    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
	
	word-break: break-word;
	width: 100%;
}

.id-grid-container-small, .id-layout-grid-container-small{
    grid-template-columns: repeat(6,1fr);
    display: grid;
	grid-column-gap: 16px;
	grid-row-gap: 0px;

    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
	
	word-break: break-word;
	width: 100%;
}

.id-intern-journal{
    grid-template-columns: repeat(3,1fr);
}

.id-layout-grid-container, .id-layout-grid-container-small{
	padding-left:8px;
	padding-right:8px;
}

.id-journal-container article{
	grid-column: span 1;
	grid-row: span 2;
	display: block;
}
.id-journal-container article.positiontype-journal-gross{
	grid-column: span 2;
	grid-row: span 2;
}
.id-journal-container article.positiontype-journal-mittel{
	grid-column: span 1;
	grid-row: span 2;
}
.id-journal-container article.positiontype-journal-klein{
	grid-column: span 1;
	grid-row: span 1;
}

.id-journal-container li{
	grid-column: span 1;
	grid-row: span 2;
	display: block;
}

.id-journal-container li.positiontype-journal-gross{
	grid-column: span 2;
	grid-row: span 2;
}
.id-journal-container li.positiontype-journal-mittel{
	grid-column: span 1;
	grid-row: span 2;
}
.id-journal-container li.positiontype-journal-klein{
	grid-column: span 1;
	grid-row: span 1;
}


.journal-thumbnail{
	padding-bottom: calc( 1.34 * 100%);/*4zu3-hoch*/
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}
.journal-thumbnail-animation{ 
	-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}
.journal-thumbnail img {
    height: auto;
	display: block;
	width: 100%;
	max-height: none;
	max-width: none;
    position: absolute;
}



/*--------------------------------------------------------------
21.2 Layout System FLEX - General Styles
--------------------------------------------------------------*/

*, ::before, ::after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

.layout *, .layout ::after, .layout ::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.layout-section .layout-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-right: auto;
    margin-left: auto;
    position: relative;
}
.layout *, .layout ::after, .layout ::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.header-section{
	padding: 0px 56px 0px 56px;	
}
.header-section{
	padding: 0px 0px 0px 0px;	
}
.journal-section{
	padding: 16px 56px 0px 56px;	
}
.project-section
{
	padding: 16px 16px 0px 16px;	
}
.remove-section-padding
{
	padding: 0px 0px 0px 0px;	
}

.layout-row {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	padding: 0px 8px 0px 8px;
}

.row-journal-padding{
	padding: 0 48px 0 48px;
}
.row-full-height{
	min-height:100vh;
}
.reverse-row{
	flex-direction: row;
}

.layout-column {
    position: relative;
    min-height: 1px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
	padding: 8px;
}
.column-width-100{
	width: 100%;
}
.column-width-75{
	width: 75%;
}
.column-width-66{
	width: 66.6%;
}
.column-width-50{
	width: 50%;
}
.column-width-33{
	width: 33.3%;
}
.column-width-25{
	width: 25%;
}
.column-padding-56{
	padding: 56px;
}
.column-no-padding{
	padding: 0 0 0 0;
}
.column-no-horizontal-padding{
	padding-left: 0px;
	padding-right: 0px;
}

.layout-column.layout-col-50, .layout-column[data-col="50"] {
    width: 50%;
}


.flip-mobile-order_e1{
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
	order: 1;
}
.flip-mobile-order_e2{
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
	order: 2;
}
.flip-mobile-order_e3{
    -webkit-box-ordinal-group: 4;
    -webkit-order: 3;
    -ms-flex-order: 3;
	order: 3;
}
.flip-mobile-order_e4{
    -webkit-box-ordinal-group: 5;
    -webkit-order: 4;
    -ms-flex-order: 4;
	order: 4;
}

.element-wraper{
	padding:0;
	margin:0;
	width:100%;
	display:block;	
}
/* Specific Content Styles for PW Layout System Field */
.layout-element{
	padding: 0;
	margin: 0;
	width:100%;
	box-sizing: border-box;
	display:inline-block;
}
.layout-element img{
	vertical-align: middle;
	display: inline-block;
}
.layout img {
    height: auto;
    max-width: 100%;
    border: none;
}



/* Media Queries for Grid and Flex Layout */


#offcanvas-toggle{
	display:none;
}


@media(max-width:75em){ /* Small Computer Screen  1200px*/
	.id-grid-container-small,.id-layout-grid-container-small{
		grid-template-columns: repeat(4,1fr);
	}
	.id-intern-journal{
		grid-template-columns: repeat(3,1fr);
	}
	.row-journal-padding{
		padding: 0 8px 0 8px;
	}
	.journal-section{
		padding: 16px 16px 0px 16px;		
	}		
	.journal-section .id-grid-container{
		grid-column-gap: 16px;
		grid-row-gap: 0px;
	}	
	
	article.positiontype-journal-klein .journal_thumbnail{
		padding-bottom: calc( (1.34 * 100% - 80px) / 2);/* 3zu2-quer*/ 
	}
	article.positiontype-journal-gross .journal_thumbnail{
		padding-bottom: calc( 0.67 * (100% - 16px )); /*3zu2-quer*/
	}	
	
	.journal-label h2,.journal-label h3{
		line-height:18px;
		margin:0;
	}
	.column-padding-56 {
		padding: 56px 32px 52px 16px;
	}
}



@media(max-width:60em){ /* Tablet Size 960px */	
	.journal-label h2, .journal-label h3, .journal-label p{		
		hyphens: auto;
		hyphenate-limit-chars: auto 5;
		hyphenate-limit-lines: 2;
	}
	.id-intern-journal{
		grid-template-columns: repeat(2,1fr);
	}
}



@media(max-width:40em){  /* Mobile Size 640px */
	#offcanvas-toggle{
		display:block;
	}

	.id-grid-container, .id-layout-grid-container{
		grid-template-columns: repeat(2,1fr);
		grid-column-gap: 2px;
		grid-row-gap: 0px;
		width: 100%;
	}
	.id-grid-container-small, .id-layout-grid-container-small{
		grid-template-columns: repeat(3,1fr);
		grid-column-gap: 2px;
		grid-row-gap: 0px;
		width: 100%;
	}
	.id-layout-grid-container, .id-layout-grid-container-small{
		padding-left:0px;
		padding-right:0px;
		width: 100%;
	}
	.id-layout-grid-container-small{
		grid-template-columns: repeat(3,1fr);
		grid-column-gap: 2px;
		grid-row-gap: 0px;
		width: 100%;
	}	
	.id-intern-journal{
		grid-template-columns: repeat(2,1fr);
	}

	.column-width-75{
		width: 100%;
	}
	.column-width-66{
		width: 100%;
	}	
	.column-width-50{
		width: 100%;
	}
	.column-width-33{
		width: 50%;
	}
	.column-width-25{
		width: 50%;
	}
	.hide-column-mobile{
		display: none;
	}
	.column-image{
		padding: 4px 0 4px 0;
	}	
	.row-reverse{
		flex-direction: column-reverse;
	}
	.flip-mobile-order_e1{
		-webkit-box-ordinal-group: 11;
		-webkit-order: 10;
		-ms-flex-order: 10;
		order: 10;
	}
	.flip-mobile-order_e2{
		-webkit-box-ordinal-group: 10;
		-webkit-order: 9;
		-ms-flex-order: 9;
		order: 9;
	}
	.flip-mobile-order_e3{
		-webkit-box-ordinal-group: 9;
		-webkit-order: 8;
		-ms-flex-order: 8;
		order: 8;
	}
	.flip-mobile-order_e4{
		-webkit-box-ordinal-group: 8;
		-webkit-order: 7;
		-ms-flex-order: 7;
		order: 7;
	}	


	.project-section{
		padding: 0px 0px 0px 0px;	
	}	
	.journal-section{
		padding: 0px 0px 0px 0px;		
	}
	.journal-section .id-grid-container{
		grid-column-gap: 2px;
		grid-row-gap: 0px;
	}	
	
	article.positiontype-journal-klein .journal_thumbnail{
		padding-bottom: calc( (1.34 * 100% - 64px) / 2);/* 3zu2-quer*/ 
	}
	article.positiontype-journal-gross .journal_thumbnail{
		padding-bottom: calc( 0.67 * (100% - 2px )); /*3zu2-quer*/
	}	
	
	
	.journal-label h2,.journal-label h3,.journal-label p{
		font-size: 16px;
		font-size: 1rem;
		line-height: 18px;
		font-weight:400;
		padding:0 6px 0 6px;
		margin:0;
	}
	.journal-label h2{
		font-weight:600;
	}
	.project-section .id-image-caption
	{
		padding:0px 8px 0px 8px !important;
	}
}


.row-no-padding{
	padding: 0 0 0 0;
}

.ff_title,.ff_h1,.ff_logo{
	float:left;
}
.ff_nav
{
	float:right;
}
/* format the meta fields of the Project pages*/
.meta-project
{
	padding:2px 100px 0px 0px; 
	line-height:20px;	
}
.term-list-students
{
	padding:24px 0px 24px 0px; 
}

/* format the meta fields of the Person pages*/
.meta-person
{
	padding:24px 0px 0px 0px; 	
}

/* format title section of Student Portfolio Page*/
.student-title-header{
	padding-top: 48px;
	padding-bottom: 16px;
}




/****************************************************************
 * Bodycopy text and images
 *
 * These styles are good to have on any ProcessWire site
 *
 */

.align_left {
	/* for images placed in rich text editor */ 
	float: left;
	margin: 0 1em 0.5em 0; 
	position: relative;
	top: 0.5em;
	max-width: 50%; 
}
.align_right {
	/* for images placed in rich text editor */ 
	float: right;
	margin: 0 0 0.5em 1em;
	max-width: 50%; 
}
.align_center {
	/* for images placed in rich text editor */ 
	display: block;
	margin: 1em auto; 
	position: relative;
	top: 0.5em;
}
figure {
	/* figure for image that has a caption */
	display: table;
	margin: 1em 0;
}
figure figcaption {
	caption-side: bottom;
	font-size: 13px;
	font-size: 0.8125rem;
	font-style: italic;	
	line-height: 1.4em;
	margin-top: 5px;
	color: #666;
	margin: 0.8075em 0;
	width: 100%;
}

@media only screen and (max-width: 767px) {
	/* common PW mobile layout adjustments for widths under 768px */ 

	.align_left, .align_right, .align_center {
		/* display images in center rather than aligned */
		display: block;
		float: none; 
		margin: 1em auto;
		max-width: 100%; 
	}	
	figure,
    figure figcaption {
		/* let figcaption display as wide as needed below image */
	    display: block;
	    text-align: center;
    }
}



address, dl, fieldset, figure, ol, p, pre, ul {
    margin: 0 0 0 0;
}



/* Styles for Layout System Repeater Matrix */

.team-title, .project-title, .journal-title, .page-title, .page-title h1, .discipline-title h1{
	font-family: "RotisSansSerifW01-Light_735438", Arial, Verdana, Sans-serif;
	padding:0;
	margin:0;
	line-height:1;
}
.discipline-title h1{
	font-size: 40px;
	font-size: 2.5rem;
}
.team-content, .journal-content{
	padding-top: 56px;
}

.project-content, .page-content, .discipline-content{
	padding-top: 2rem;
	padding-bottom: 2rem;
}
.layout-text p,.layout-text h1,.layout-text h2,.layout-text h3,.layout-text h4{
	padding-right: 1.5rem;
}
.project-meta, .page-meta, .journal-meta, .discipline-meta-extend, .page-meta-extend{
	line-height: 1.15rem;
	padding-top: 2.1rem;
}
.journal-meta-extend{
	line-height: 1.15rem;
	padding-top: 0;
}
.team-content-footer, .project-content-footer, .journal-content-footer, .page-content-footer{
	padding-top: 40px;
}
.team-content p, .project-content p, .journal-content p, .page-content p, .discipline-content p, .layout-text p, .discipline-meta-extend p, .page-meta-extend p{
	padding-bottom: 1rem;
}
.team-body a, .project-body a, .journal-body a, .discipline-body a, .page-body a, .layout-text a, .page-content a, .page-meta a{
	text-decoration: underline;
}

.layout-text{
	width: 100%;
}
.layout-file{
	padding-bottom:8px
}

.section-title{
	padding-top: 32px;			
}
.section-title h2{
	padding:0;
	margin:0;			
}
.remove-padding-top{
	padding-top:0px;
}

/*format portfolio list*/
.a-student-portfolio{ 
	text-decoration: underline;
}
.a-student-portfolio::after {
  content: "" ;
}



/*title overlay for Feature image on project pages*/
.feature-title{
	display: block;
	z-index: 20;
	position: absolute;
	top: calc( 56px + 72px);
	width: 100%;
	text-align: center;	
	padding:0 40px 0 40px ;
}

.ObenLinks{
	top: calc( 56px + 72px);
	text-align: left;
}
.ObenMitte{
	top: calc( 56px + 72px);
	text-align: center;
}
.ObenRechts{
	top: calc( 56px + 72px);
	text-align: right;
}
.MitteLinks{
	top:50%;
	text-align: left;	
}
.MitteMitte{	
	top:50%;
	text-align: center;
}
.MitteRechts{
	top:50%;
	text-align: right;
}
.UntenLinks{
	top: auto;
	bottom: 56px;
	text-align: left;
}
.UntenMitte{
	top:80%;
	bottom: 56px;
	text-align: center;	
}
.UntenRechts{
	top: auto;
	bottom: 56px;
	text-align: right;		
}

/* distance-before settings for Layoutsystem blocks*/
.layout-padding-top-small{
	padding-top: 56px;
}
.layout-padding-top-middle{
	padding-top: 80px;
}
.layout-padding-top-large{
	padding-top: 112px;
}
.layout-padding-top-verylarge{
	padding-top: 224px;
}


.center-text{
	width:100%;
	text-align: center;
}


.editbar-button-left{
	float:left;
	padding-right:10px;
}
.editbar-button-right{
	float:right;
}

.editbar-delete-button, .page-preview-button{
	padding-right:10px;
}

.padding-red{
	margin-bottom: -24px;
}


@media(max-width:75em){ /* Small Computer Screen  1200px*/
	.layout-text p,.layout-text h1,.layout-text h2,.layout-text h3,.layout-text h4{
		padding-right: 1rem;
	}
}


@media(max-width:60em){ /* Tablet Size 1024px */
	.layout-text p,.layout-text h1,.layout-text h2,.layout-text h3,.layout-text h4{
		padding-right: 0;
	}
	.editbar-button-right{
		float:left;
		padding-top:10px;
		clear:both;
	}
}


@media(max-width:40em){  /* Mobile Size 767px */
	.padding-red{
		margin-bottom: 0px;
	}
}



.visible-for-students{
	background-color: rgba(0,0,0,0.05);
}
.visible-for-editors{	
	background-color: #fff5e4;
}

.visible-for-me{
	background-color: rgba(255,0,0,0.05);
}

.journal-article-hidden a, .journal-article-hidden a:hover{
	color: #e6e6e6;
	color: #999;
}

.journal-article-unpublished a, .journal-article-unpublished a:hover{
	color: #ffe4b5;
}

.add-placeholder-tag{
	color: #e6e6e6;
}

.id-nav-bg{
	background: #e6e6e6;
}

.InputfieldImageEdit{
	background: #fff;	
}

.project-ul{
	padding-left: 0px;
	list-style-type: none;
}

.uk-subnav-pill > .uk-active > a {
    background-color: #ffa100;
    color: #fff;
}


.uk-accordion-content {
    margin-top: 0px;
}
.uk-accordion-title {

    font-size: 1.25rem;
    line-height: 1.4;
    padding-top: 0px;

}

.element-wraper > .incell_image{
	padding-top: 16px;
}
.element-wraper > .incell_image:first-child{
	padding-top: 0px;
}
.element-wraper > .incell_video{
	padding-top: 16px;
}
.element-wraper > .incell_video:first-child{
	padding-top: 0px;
}
.id-overlay {
    padding: 0px 0px;
	margin:0;
	top: -4px;
}
.id-overlay-editbar {
    padding: 0px 0px;
	margin:0;
	top: 0px;
	right: 0px;
	width: 40px;
	left: auto;
}

.journal-dropdown {
    min-width: 0;
	width:100%;
    padding: 4px 4px;
	color:#000;
	background: #e6e6e6;
}

.journal-dropdown a{
	color:#666;
}
.journal-dropdown a:hover, .journal-dropdown a:focus {
    color: #333;
}
.journal-overlay-svg{
	    /*top: -4px;*/
	    height: 20px;
	    width: 20px;
}
.journal-overlay-editbar-svg{
	    /*top: -4px;*/
	    height: 40px;
	    width: 40px;
}

.journal-overlay-svg:hover .journal-overlay-description {visibility:visible;}

[class*="uk-dropdown-bottom"] {
    margin-top: 0px;
}
.tri-1{
	fill:#fff;
}
.tri-2{
	fill:#666;
	fill:#ffe4b5;
}
.tri-3{
	fill:#e6e6e6;
}
.tri-4{
	fill:#ffe4b5;
	fill:#ffa100;
}
.tri-5{
	fill:#ffa100;
	fill:#AA5900
}



.journal-overlay-link div{
 position: absolute !important;
 visibility:hidden;	
 color: #333;
 line-height:1.5rem; 
 top:4px;
 left:24px;
}
.journal-overlay-link:hover div{
    visibility: visible;
}
.id-main-nav-dropdown {
    padding: 12px;
    background: #fff;
	z-index: 10020;
    color: #666;
}
.id-main-nav-ul {
    padding-left: 0px;
}
.id-neutral-link a{
	text-decoration:none;
}
.id-page-list {
	padding-top: 32px;
	padding-bottom: 32px;
}
.id-page-list a, .layout-file {
	font-weight: bold;
}










@media only screen and (max-width: 959px) {
	/* custom adjustments for mobile layouts under 960px */
	#masthead {
		/* primary nav is not visible, so it needs some padding here */
		padding-bottom: 20px;
	}
	#masthead2 {
		/* primary nav is not visible, so it needs some padding here */
		height: 100px;
		margin-left: 5px;
		box-sizing: border-box;	
		padding-bottom: 20px;
	}
	.id-feature-image-height-100p {
		height: 75vh;
	}
}




.rundgang-headline-element{
	display: block;
	float: left;
}

.rundgang-logo{
 margin-bottom: -5px;		
}

.headline-folkwang-logo{
 margin-bottom: -30px;		
}

.rundgang-title-bold{
    font-weight: 700;
}
.rundgang-title-thin{
    font-weight: 400;
	font-size: 1.5rem;
}
.add-placeholder-tag {
    color: #e6e6e6;
}

.rundgang-filter-thin{
    font-weight: 400;
	font-size: 1.5rem;
}

::selection {

    background: #000;
    color: #fff;
    text-shadow: none;

}

.swiper-button-next, .swiper-button-prev {

    position: absolute;
    top: 50%;
    width: 27px !important; 
    height: 24px !important; 
    margin-top: -12px !important; 
    z-index: 10;
    cursor: pointer;
    background-size: 27px 22px !important; 
    background-position: center;
    background-repeat: no-repeat;

}

.id-feature-image-height-100px > .swiper-container {
  width: 100%;
  height: 100px;
}

.id-feature-image-height-100 > .swiper-container {
  width: 100%;
  height: 100vh;
}

.id-feature-image-height-80 > .swiper-container {
  width: 100%;
  height: 80vh;
}

.id-feature-image-height-50 > .swiper-container {
  width: 100%;
  height: 50vh;
}
.id-feature-image-height-auto > .swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  background-position: center;
  background-size: cover;
}

.header-card {
	padding-top:0px !important;
	padding-bottom:10px !important;
	
	background-color:#e5e5e5;
	/*background-color:#fff;
	border-top: 1px dashed #e5e5e5;
	border-left: 1px dashed #e5e5e5;
	border-right: 1px dashed #e5e5e5;*/
	width: 100%;
}
.header-card2 {
	padding-top:0px !important;
	padding-bottom:0px !important;
	width: 100%;
}
.sub-nav-small {
	line-height: 2.6;
}

.inner-header-card {
	padding-top:0px;
	padding-bottom:0px;
	/*background-color:#fff;*/
	width: 100%;
}

.inner-header-card h2{
	margin-top: 10px !important;
	margin-bottom: 0px !important;
}

.inner-header-card:hover h2{
    color: #ffa100;
}



.inner-header-card:hover h2::after {
  content: "<<";
}

.header-element {
	display: inline-block;
	float:left;
	padding:0px;
	padding:0px;	
	height:40px;
}

.header-element {
	padding-right:15px;
}


.header-element .rundgang-logo{
 margin-top: -46px;
 margin-bottom: 0px;		
}
.header-element:hover span:last-child::after {
  content: "";
}



.id-card-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.id-edit-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 50;
}

.id-label {
    display: inline-block;
    padding: 0 5px;
    background: #e5e5e5;
    line-height: 1.1;
    font-size: 0.7rem;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 2px;
    text-transform: uppercase;
}
.id-edit-label {
    display: inline-block;
    padding: 0 5px;
    background: #e5e5e5;
    font-size: 0.7rem;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
    text-transform: uppercase;
}
.id-label a{
    color: #fff;
}
.id-label a:hover{
    color: #ffa100;
}










/* Pulse */
@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
.hvr-pulse {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active, .hvr-pulse-auto {
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.hvr-pulse-auto {
	color: #ffa100;
}

/* Pulse */
@-webkit-keyframes hvr-pulse-big {
  25% {
    -webkit-transform: scale(3);
    transform: scale(3);
  }
  75% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes hvr-pulse-big {
  25% {
    -webkit-transform: scale(3);
    transform: scale(3);
  }
  75% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.hvr-pulse-big {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pulse-big:hover, .hvr-pulse-big:focus, .hvr-pulse-big:active {
  -webkit-animation-name: hvr-pulse-big;
  animation-name: hvr-pulse-big;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}



/* Pulse Grow */
@-webkit-keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
.hvr-pulse-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hvr-pulse-grow:hover, .hvr-pulse-grow:focus, .hvr-pulse-grow:active {
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}


.uid-link:hover {
    color: #ffa100;
    color: #0f6ecd;
    text-decoration: underline;
    text-decoration-style: none;
}
.id-link {
    color: #222;
    text-decoration-line: none;
    text-decoration-style: none;
    text-decoration: none;
    color: #1e87f0;
    text-decoration: none;
    cursor: pointer;
}

.id-subnav {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    padding: 0;
    list-style: none;
}
.id-subnav > * {
    flex: none;
    padding-left: 20px;
    position: relative;
}

.id-subnav > .uk-active > a {
    color: #ffa100;
}
.id-subnav > * > a:hover, .uk-subnav > * > a:focus {
    color: #ffa100;
    text-decoration: none;
    outline: none;
}


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 0px solid #cccccc !important;
    background: #ffa100 !important;
    font-weight: bold;
    color: #1c94c4;
	box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 0px !important;
	border-top-right-radius: 0px !important;
	border-bottom-left-radius: 0px !important;
	border-top-left-radius: 0px !important;
}


.uk-card-title{
    margin-top: 0px !important;
	margin-bottom: 10px !important;
}
.video-play-icon svg{
	/*fill: rgba(255, 161, 0, 0.5);*/
	fill: rgba(255, 255, 255, 0.7);
}

.video-play-icon svg:hover{
	fill: rgba(255, 161, 0, 1);
}

.header-content{
	background-color:#e5e5e5;
}
.fb4-cards .uk-card-default{
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.41);
}





/* Styles for Layout Edit Elements */

.edit-row{
	border:0px;
	border-style: none;
}
.edit-row:hover{
	border:0px;
	border-style: none;
	/*box-shadow: 0 0 0.5em;*/
	background-color: rgba(30, 135, 240, 0.1);
    border: 1px solid #1e87f0;
}
.id-inline{
	position: relative;
}
.id-edit-layout-overlay {
    padding: 0px 0px;
	margin:0;
	top: -12px;
	color: black;
	background-color: grey;
	opacity:0;
}
.id-edit-layout-overlay:hover {
    padding: 0px 0px;
	margin:0;
	top: -12px;
	color: black;
	background-color: grey;
	opacity:0.8;
}
.id-edit-layout-overlay-2 {
    padding: 0px 0px;
	margin:0;
	top: -12px;
	color: black;
	opacity:0.1;
	padding-right:22px;
}
.id-edit-layout-overlay-2 a{
	color: black;
}
.id-edit-layout-overlay-2 a:hover{
	color: #ffa100;
}
.layout-column-edit{
	min-height: 100px;
}
.layout-row .id-edit-layout-overlay-2{
		opacity:0.1;
}
.layout-row:hover + .id-edit-layout-overlay-2, .layout-row:hover + .id-edit-layout-overlay-2 a {
		opacity:0.5;
		/*color: red;*/
}
.id-edit-layout-overlay-2:hover {
		opacity:1;
}
.id-edit-layout-overlay-2:hover + .layout-column{
		border: 2px;
		border-style: none;
		background-color: grey;
}
.uk-dropdown {
	z-index: 20000;
}
.layout-edit-overlay-svg{
	width: 42px;
	height: 16px;
}
.layout-edit-footer{
	height: 100px;
	opacity:0.2;
}
.layout-edit-footer:hover{
	opacity:1;
}
.line-edit-class{
	padding-bottom:20px;
}
.hide-element, .preview-hide{
	display: none;
}


.item-overlay-icon{
	padding-left:8px;
}


.bg-warning{
	background-color:red;
	/*border-style: dotted;
	border-color:red;*/
}

.no-padding{
    padding: 0px;
}

.nav-subpage-list > li:nth-child(n+2) {
    margin-top: 8px;
}
.nav-subpage-list a{
    text-decoration: none;
}

/*
::selection {
    background: #ffa100;
}*/

.uk-button-primary:hover, .uk-button-primary:focus {
    background-color: #e79200;
}

.uk-button-primary {
    background-color: #ffa100;
}
.main-nav-portfolio:hover ,.user_page_avtive{
	text-decoration: underline ;
}

.rating-page:hover polygon{
	fill:#ffa100;
	stroke:#ffa100;
	color:#ffa100;	
}

.rating-page:hover .rating-num{
	visibility: visible;
}

.rating-svg{
    padding: 0 2px 0 2px;
    margin: 0;
    float: left;
}
.rating-num{
    padding: 2px 0 0 2px;
    margin: 0;
    float: left;
	visibility: hidden;
}
.rating-num-visible{
	visibility: visible;
}

.rating-rated polygon{
	fill:#888;
	stroke:#888;
	color:#fff;	
}

.rating-toprated polygon{
	fill:#fff;
	stroke:#fff;
	color:#fff;	
}
.rating-favorite polygon{
	fill:#ffa100;
	stroke:#ffa100;
	color:#ffa100;	
}
.submission-upload:hover{
	border-style: dotted;
	border-color:red;
}
.submission-complete{
	color: rgba(255,255,255,.7);
}
.submission-incomplete{
	color: rgba(255,0,0,1);
}

.id-overlay-submission{
	padding:2px 40px 0 0;
}
.submission-icon{
    padding: 2px 2px 0 2px;
    margin: 0;
    float: left;
}
.submission-file-type{
	font-weight: bold;
}


/******************** STYLES FOR INLINE CSS CLASSES IN LAYOUT SYSTEM  *****************************/

/*CSS overide settings for journal Layout-System block on campus page */
.liste-werkstatt .journal-label{
	height:48px;
}
/* map adjustments on contact page*/
.id-map{
	height:100vh;
}
.layout-placeholder {
	border-right: 1px dotted #c1c0c0;
	border-bottom: 1px dotted #c1c0c0;
}
.show-edit > .layout-placeholder:hover{
    border: 1px solid #000;
}
.layout-no-placeholder {
    border: none;
}