/*
 * STYLE.CSS -- LOOK AND FEEL
 */

/* RBS-Styleguide

 dynamic red - 255 94 53 - #ff5e35

 off white - 245 245 245 - #f5f5f5

 court green - 0 52 58 - #00343a
 ableitung 1 - 214 240 235 - #d6f0eb
 ableitung 2 - 175 194 190 - #afc2be

 growing elder - 225 215 255 - #e1d7ff
 ableitung 1 - 209 209 232 - #d1d1e8
 ableitung 2 - 154 155 184 - #9a9bb8

 document weiß - 255 255 255 - #ffffff
 document schwarz - 0 0 0 - #000000

 Schrift Univers 55

*/


/*
 * DEFINITIONEN
 */

:root {
    /* Farben */
    --c_dynamic_red: #ff5e35 ;
    --c_off_white: #f5f5f5 ;
    --c_court_green: #00343a ;
    --c_court_green_i: #d6f0eb ;
    --c_court_green_ii: #afc2be ;
    --c_growing_elder: #e1d7ff ;
    --c_growing_elder_i: #d1d1e8 ;
    --c_growing_elder_ii: #9a9bb8 ;
    --c_document_fg: #000000 ;
    --c_document_bg: #ffffff ;
    /* Längen - Breite  */
    --w_grid_unit: 12em ;
    --w_indent: 3em ;
    --w_smallskip: 1ex ;
    --w_skip: 2ex ;
    --w_bigskip: 3ex ;
    --w_thinlines: 0.25ex ;
    --w_lines: 0.5ex ;
    --w_thicklines: 1ex ;
}


/*
 * GRUNDEINSTELLUNGEN
 */

* {
    border-style: none ;
    border-width: 0px ;
    font-family: Univers , Arial , sans-serif ;
    padding: 0px ;
    margin: 0px ;
}


/*
 * SEITENLAYOUT: BILDSCHIRM
 */


@media screen {
    
    /* BODY */

    html {
	background-color: var(--c_off_white) ;
    }

    /* 4 Zeilen
       header : headsep : main( nav / article / aside / + ) : footer */
    body {
	background-image: url(./rbs-key.png) ;
	display: grid ;
	grid-template-rows: auto auto 1fr min-content ;
	margin: 4px ;
    }

    
    /* HEAEDER */

    header {
	background-color: var(--c_off_white) ;
	display: grid ;
	grid-column: 1 / -1 ;
	grid-row: 1 / 2 ;
	grid-template-columns: subgrid ;
    }

    div.eule {
	align-self: end ;
	grid-column: 1 / 1 ;
	grid-row: 1 / 1 ;
	justify-self: center ;
    }
    div.eule img {
	/*height: auto ;
	max-height: calc( 2 * var(--w_grid_unit) / 3 ) ;*/
	text-align: center ;
	vertical-align: bottom ;
    }
    div.sag {
	align-self: end ;
	grid-column: 2 / -1 ;
	grid-row: 1 / 1 ;
	overflow-x: hidden ;
	justify-self: left ;
	white-space: nowrap ;
	z-index: 1 ;
    }
    div.sag a {
	color: var(--c_court_green) ;
	text-decoration: none ;
    }
    /* div.sag a:active ,
    div.sag a:hover  {
	color: var(--c_dynamic_red) ;
    }*/
    div.rbs {
	background-image: url(./rbs-logo.png) ;
	background-position: top right ;
	background-repeat: no-repeat ;
	/*background-size: calc( 3 * var(--w_grid_unit) / 2 )
			 calc( var(--w_grid_unit) / 2 ) ; */
	grid-column: 2 / 4 ;
	grid-row: 1 / 1 ;
    }


    /* HEADSEP */
    
    div.headsep {
	background-color: var(--c_court_green_ii) ;
	border-bottom-color: var(--c_court_green) ;
	border-bottom-style: solid ;
	border-bottom-width: var(--w_thicklines) ;
	border-top-color: var(--c_growing_elder) ;
	border-top-style: solid ;
	border-top-width: calc( 2 * var(--w_thicklines) / 3 ) ;
	display: grid ;
	grid-column: 1 / -1 ;
	grid-row: 2 / 2 ;
	grid-template-columns: subgrid ;
	/* height: calc( var(--w_grid_unit) / 4 ) ; */
    }

    div.flyout {
	align-self: center ;
	color: var(--c_document_bg) ;
	justify-self: center ;
	overflow-x: hidden ;
	text-wrap: nowrap ;
    }
    div.flyout summary {
	cursor: pointer ;
    }
    div.flyout summary span {
	font-size: 0em ;
    }
    div.flyout summary::marker {
	/* ☰ ≡ Ξ */
	content: "\2630" ;
    }
    div.flyout details[open] {
	/* background-color: var(--c_court_green_ii) ; */
	background-color: var(--c_off_white) ;
	color: var(--c_document_fg) ;
	position: absolute ;
	top: calc( var(--w_grid_unit) / 2 + var(--w_thicklines) ) ;
	left: 4px ;
    }
    div.flyout details[open] {
	color: var(--c_dynamic_red) ;
	z-index: 2 ;
    }
    div.flyout details[open] summary::marker {
	/* ⨉ х ✖ */
	content: "\2a09" ;
    }
    div.flyout a {
	color: var(--c_document_fg) ;
	text-decoration: none ;
    }
    div.flyout a:active ,
    div.flyout a:hover {
	color: var(--c_document_bg) ;
    }
    div.flyout ul {
	justify-self: center ;
	list-style: none ;
	text-align: center ;
	width: var(--w_grid_unit) ;
    }
    div.flyout li {
	background-color: var(--c_document_bg) ;
	border-color: var(--c_court_green) ;
	border-radius: 4em ;
	border-style: solid ;
	border-width: var(--w_thinlines) ;
	margin-top: var(--w_bigskip) ;
	padding: var(--w_smallskip) ;
	text-align: center ;
	vertical-align: middle ;
    }
    div.flyout li:active ,
    div.flyout li:hover {
	background-color: var(--c_dynamic_red) ;
	color: var(--c_document_bg) ;
    }
    div.flyout p {
	overflow-x: hidden ;
	white-space: nowrap ;
    }
    
    div.position {
	align-self: center ;
	grid-column: 2 / -1 ;
	color: var(--c_document_bg) ;
	overflow-x: hidden ;
	text-wrap: nowrap ;
    }
    div.position a {
	color: var(--c_document_bg) ;
	text-decoration: none ;
    }

    
    /* MAIN */
    
    main {
	background-color: var(--c_document_bg) ;
	border-bottom-color: var(--c_dynamic_red) ;
	border-bottom-style: solid ;
	border-bottom-width: var(--w_lines) ;
	border-top-color: var(--c_dynamic_red) ;
	border-top-style: solid ;
	border-top-width: var(--w_lines) ;
	color: var(--c_document_fg) ;
	display: grid ;
	grid-row: 3 / 3 ;
	grid-template-columns: subgrid ;
    }

    article {
	background-color: var(--c_document_bg) ;
	text-align: left ;
    }

    aside {
	background-color: var(--c_document_bg) ;
	margin-top: var(--w_bigskip) ;
	text-align: left ;
    }
    aside ul {
	list-style: none ;
	text-align: left ;
    }
    aside li {
	margin-top: var(--w_skip) ;
    }
    aside a {
	color: var(--c_court_green_ii) ;
	text-decoration: none ;
    }
    aside a:active ,
    aside a:hover {
	color: var(--c_dynamic_red) ;
    }

    
    /* NAV */

    nav {
	background-color: var(--c_off_white) ;
    }
    nav a {
	color: var(--c_document_fg) ;
	text-decoration: none ;
    }
    nav a:active ,
    nav a:hover {
	color: var(--c_document_bg) ;
    }
    nav ul {
	justify-self: center ;
	list-style: none ;
	text-align: center ;
	width: 90% ;
    }
    nav li {
	background-color: var(--c_document_bg) ;
	border-color: var(--c_court_green) ;
	border-radius: 4em ;
	border-style: solid ;
	border-width: var(--w_thinlines) ;
	margin-top: var(--w_bigskip) ;
	padding: var(--w_smallskip) ;
	text-align: center ;
	vertical-align: middle ;
    }
    nav li:active ,
    nav li:hover {
	background-color: var(--c_dynamic_red) ;
	color: var(--c_document_bg) ;
    }
    nav p {
	overflow-x: hidden ;
	white-space: nowrap ;
    }
    
    
    /* FOOTER */
    
    footer {
	background-color: var(--c_court_green_ii) ;
	border-top-color: var(--c_court_green) ;
	border-top-style: solid ;
	border-top-width: calc( 2 * var(--w_thicklines) / 3 ) ;
	display: grid ;
	grid-column: 1 / 4 ;
	grid-row: 4 / 4 ;
	grid-template-columns: subgrid ;
    }
    footer ul {
	justify-self: center ;
	list-style: none ;
	text-align: center ;
	width: 90% ;
    }
    footer li {
	border-color: var(--c_document_bg) ;
	border-radius: 4em ;
	border-style: solid ;
	border-width: var(--w_thinlines) ;
	margin-top: var(--w_bigskip) ;
	overflow-x: hidden ;
	padding: var(--w_smallskip) ;
	text-align: center ;
	white-space: nowrap ;
    }
    footer li:active ,
    footer li:hover {
	background-color: var(--c_dynamic_red) ;
	color: var(--c_document_bg) ;
    }
    footer a {
	color: var(--c_document_bg) ;
	text-decoration: none ;
    }
    footer a:active ,
    footer a:hover {
	color: var(--c_document_bg) ;
    }
    footer img.logo {
	display: inline-block ;
	margin-right: calc( var(--w_grid_unit) / 6 ) ;
	width: calc( 5 * var(--w_grid_unit) / 6 ) ;
    }

    div.impressum {
	align-self: start ;
	color: var(--c_document_bg) ;
    }
    
    
    /* MEDIENHÄNGIGE EINSTELLUNGEN / GRID */

    /*
      Breite < 4gu
      nav = none : article = flex : aside = none : body = none
   */
    @media ( width <= 48em ) {
	body {
            grid-template-columns: 1fr 5fr 0em 0em ;
	}
	/* header */
	div.eule img {
	    max-height: calc( var(--w_grid_unit) / 2 ) ;
	}
	div.sag {
	    font-size: calc( var(--w_grid_unit) / 6 ) ;
	}
	div.rbs {
	    background-size: var(--w_grid_unit)
			     calc( var(--w_grid_unit) / 3 ) ;
	}
	/* headsep */
	div.headsep {
	    height: calc( var(--w_grid_unit) / 6 ) ;
	}
	div.flyout {
	    grid-column: 1 / 1 ;
	}
	summary {
	    font-size: calc( var(--w_grid_unit) / 8 ) ;
	}
	detail[open] {
	    grid-column: 1 / -1 ;
	    grid-row: 2 / 4 ;
	}
	/* main */
	main {
	    grid-column: 1 / 4 ;
	}
	article div.menu section {
	    width: 80% ;
	}
	/* nav */
	nav {
	    display: none ;
	}
	/* article */
	article {
	    grid-column: 1 / -1 ;
	}
	article.index {
	    grid-column: 1 / -1 ;
	}
	/* aside */
	aside {
	    display: none ;
	}
	/* footer */
	footer a {
	    font-weight: normal ;
	    font-size: small ;
	}
	div.impressum {
	    display: none ;
	}
	div.kooperationen {
	    grid-column: 1 / 4 ;
	}
    }
    /*
      4gu < Breite < 6gu
      nav = 1/6 : article = 5/6 : aside = none : body = none
   */
    @media ( (width >= 48em) and (width <= 72em) ) {
	body {
            grid-template-columns: 1fr 5fr 0em 0em ;
	}
	/* header */
	div.eule img {
	    max-height: calc( 2 * var(--w_grid_unit) / 3 ) ;
	}
	div.sag {
	    font-size: calc( var(--w_grid_unit) / 4 ) ;
	}
	div.rbs {
	    background-size: calc( 3 * var(--w_grid_unit) / 2 )
			     calc( var(--w_grid_unit) / 2 ) ;
	}
	/* headsep */
	div.headsep {
	    height: calc( var(--w_grid_unit) / 5 ) ;
	}
	div.flyout {
	    display: none ;
	}
	/* main */
	main {
	    grid-column: 2 / 4 ;
	}
	article div.menu section {
	    margin-right: 80% ;
	    width: 40% ;
	}
	/* nav */
	nav {
	    grid-column: 1 / 1 ;
	    grid-row: 3 / 3 ;
	}
	nav a {
	    font-weight: normal ;
	    font-size: small ;
	}
	/* article */
	article {
	    grid-column: 1 / 3 ;
	}
	article.index {
	    grid-column: 1 / 3 ;
	}
	/* aside */
	aside {
	    display: none ;
	}
	/* footer */
	footer a {
	    font-weight: normal ;
	    font-size: small ;
	}
	div.impressum {
	    grid-column: 1 / 2 ;
	}
	div.kooperationen {
	    grid-column: 2 / 4 ;
	}
    }
    /*
      6gu < Breite < 8gu
      nav = 1gu : article = 5gu : aside = flex : body = none
   */
    @media ( (width >= 72em) and (width <= 96em) ) {
	body {
            grid-template-columns: var(--w_grid_unit)
				   calc( 5 * var(--w_grid_unit) )
				   1fr 0em ;
	}
	/* header */
	div.eule img {
	    max-height: calc( 2 * var(--w_grid_unit) / 3 ) ;
	}
	div.sag {
	    font-size: calc( var(--w_grid_unit) / 3 ) ;
	}
	div.rbs {
	    background-size: calc( 3 * var(--w_grid_unit) / 2 )
			     calc( var(--w_grid_unit) / 2 ) ;
	}
	/* headsep */
	div.headsep {
	    height: calc( var(--w_grid_unit) / 4 ) ;
	}
	div.flyout {
	    display: none ;
	}
	/* main */
	main {
	    grid-column: 2 / 4 ;
	}
	article div.menu section {
	    margin-right: 4% ;
	    width: 28% ;
	}
	/* nav */
	nav {
	    grid-column: 1 / 1 ;
	    grid-row: 3 / 3 ;
	}
	nav a {
	    font-weight: bold ;
	    font-size: medium ;
	}
	/* article */
	article {
	    grid-column: 1 / 2 ;
	}
	article.index {
	    grid-column: 1 / 3 ;
	}
	/* aside */
	aside {
	    grid-column: 2 / 3 ;
	}
	/* footer */
	footer a {
	    font-weight: bold ;
	    font-size: medium ;
	}
	div.impressum {
	    grid-column: 1 / 2 ;
	}
	div.kooperationen {
	    grid-column: 2 / 4 ;
	}
    }
    /*
      8gu < Breite
      nav = 1gu : article = 5gu : aside = 2gu : body = flex
   */
    @media (width >= 96em) {
	body {
            grid-template-columns: var(--w_grid_unit)
				   calc( 5 * var(--w_grid_unit) )
				   calc( 2 * var(--w_grid_unit) )
				   1fr ;
	}
	/* header */
	div.eule img {
	    max-height: calc( 2 * var(--w_grid_unit) / 3 ) ;
	}
	div.sag {
	    font-size: calc( var(--w_grid_unit) / 3 ) ;
	}
	div.rbs {
	    background-size: calc( 3 * var(--w_grid_unit) / 2 )
			     calc( var(--w_grid_unit) / 2 ) ;
	}
	/* headsep */
	div.headsep {
	    height: calc( var(--w_grid_unit) / 4 ) ;
	}
	div.flyout {
	    display: none ;
	}
	/* main */
	main {
	    grid-column: 2 / 4 ;
	}
	article div.menu section {
	    margin-right: 8% ;
	    width: 24% ;
	}
	/* nav */
	nav {
	    grid-column: 1 / 1 ;
	    grid-row: 3 / 3 ;
	}
	nav a {
	    font-weight: bold ;
	    font-size: medium ;
	}
	/* article */
	article {
	    grid-column: 1 / 2 ;
	}
	article.index {
	    grid-column: 1 / 3 ;
	}
	/* aside */
	aside {
	    grid-column: 2 / 3 ;
	}
	/* footer */
	footer a {
	    font-weight: bold ;
	    font-size: medium ;
	}
	div.impressum {
	    grid-column: 1 / 2 ;
	}
	div.kooperationen {
	    grid-column: 2 / 4 ;
	}
    }
}


/* SEITENLAYOUT: DRUCKANSICHT */

@media print {
    body {
	color: var(--fg_print) ;
	background-color: var(--bg_print) ;
    }
    div.sag a {
	color: var(--fg_print) ;
    }
    header {
	display: table-row ;
    }
    div.eule {
	display: table-cell ;
	vertical-align: bottom ;
	width: 6.4em ;
    }
    div.eule img {
	height: auto ;
	/* H x 423/635  = 0.666 H */
	width: 80% ;
    }
    div.sag {
	display: table-cell ;
	vertical-align: bottom ;
    }
    div.sag a {
	font-size: 3em ;
    }
    div.rbs ,
    div.position ,
    aside ,
    nav ,
    footer {
	display: none ;
    }
}


/*
 * DOCUMENT (ARTICLE)
 */


/* TYPOGRAPHIE */

/* Grundschrift */

article {
    color: var(--c_document_fg) ;
    font-size: medium ;
    font-stretch: normal ;
    font-style: normal ;
    font-variant: normal ;
    font-weight: normal ;
    line-height: 133% ;
    margin-bottom: var(--w_bigskip) ;
    text-align: left ;
    text-decoration: none ;
    text-transform: none ;
    padding-left: calc( var(--w_indent) / 6 ) ;
    padding-left: calc( var(--w_indent) / 6 ) ;
    vertical-align: top ;
}


/* Menu */

article div.menu {
    background-image: url(index-bg.png) ;
    background-position: center center ;
    background-repeat: no-repeat ;
    /* font-variant: small-caps ; */
    line-height: 133% ;
    margin-top: var(--w_bigskip) ;
    min-height: 320px ;
}

article div.menu a {
    color: var(--c_document_fg) ;
    font-weight: normal ;
    font-style: normal ;
}
article div.menu a::before {
    content: "" ;
}
article div.menu a:hover ,
article div.menu a:active {
    color: var(--c_dynamic_red) ;
}

article div.menu section {
    display: inline-block ;
    /* font-variant: small-caps ; */
    margin-top: var(--w_skip) ;
    vertical-align: top ;
}

article div.section + section {
    margin-top: var(--w_skip) ;
}

article div.menu h2 {
    border-color: var(--c_growing_elder_ii) ;
    border-radius: 2em ;
    border-style: solid ;
    border-width: var(--w_thinlines) ;
    text-align: center ;
    font-size: medium ;
    font-style: normal ;
    font-variant: normal ;
    font-weight: bold ;
    margin: 0ex ;
    padding: var(--w_smallskip) ;
}

article div.menu ul {
    list-style-position: outside ;
    list-style-type: square ;
    margin-left: var(--w_indent) ;
}
article div.menu li p { 
    line-height: 100% ;
    margin-top: var(--w_smallskip) ;
}


/* Textfluss, Ausrichtung , besondere Absätze */

article .center {
    text-align: center ;
    text-indent: 0em ;
}

article .flushleft {
    text-align: left ;
    text-indent: 0em ;
}

article .flushright {
    text-align: right ;
    text-indent: 0em ;
}

article .insideright ,
article .insideright {
    text-indent: 0em ;
    padding-bottom: var(--w_smallskip) ;
    padding-top: 0ex ;
    vertical-align: top ;
}

article .insideleft {
    clear: left ;
    float: left ;
    margin-right: calc( var(--w_indent) / 2 ) ;
}

article .insideright {
    clear: right ;
    float: right ;
    margin-left: calc( var(--w_indent) / 2 ) ;
}

article .narrower {
    margin-left: var(--w_indent) ;
    margin-right: var(--w_indent) ;
    text-indent: 0em ;
}

article .noindent {
    text-indent: 0em ;
}

article .nowrap {
    white-space: nowrap ;
}

article .skip {
    margin-bottom: var(--w_skip) ;
    margin-top: var(--w_skip) ;
}

article .vcenter {
    vertical-align: middle ;
}


/* Hervorhebungen */

article em {
    font-style: italic ;
}

article em  em {
    font-style: normal ;
}

article strong {
    font-weight: bold ;
}

article .heading {
    color: var(--c_court_green) ;
}


/* Schriftgröße */

article .larger {
    font-size: 120% ;
}

article .smaller {
    font-size: 83% ;
}


/* Farben */

article .dynamicred {
    color: var(--c_dynamic_red) ;
}

article .courtgreen {
    color: var(--c_court_green) ;
}

article .growingelder {
    color: var(--c_growing_elder) ;
}


/* Verweise und Schaltflächen für Formulare */

article a {
    font-weight: bold ;
    font-style: italic ;
    text-decoration: none ;
}

/* → */
article a[href]::before ,
article button::before {
    content: "\2192\00A0" ;
}

article a[href]::after ,
article button::after {
    content: " " ;
}

article a:link ,
article a:visited , 
article button {
    color: var(--c_growing_elder_ii) ;
}

article a.undecorated::before {
    content: "" ;
}
article a.undecorated::after {
    content: "" ;
}

article button {
    background-color: var(--c_document_bg) ;
    font-size: medium ;
}

article a:active ,
article a:hover ,
article button:active ,
article button:hover {
    color: var(--c_dynamic_red) ;
}


/* Elemente mit Festbreitenschrift */

article code ,
article kbd ,
article input ,
article select ,
article textarea ,
article pre {
    font-family: monospace ;
    font-size: medium ;
}

article pre {
    background-color: var(--c_off_white) ;
    margin-left: var(--w_indent) ;
    margin-right: var(--w_indent) ;
}


/* GLIEDERUNG */

/* h1 bis h5 belegen eine eigene Zeile */

article h1 ,
article h2 ,
article h3 ,
article h4 ,
article h5 {
    clear: left ;
    color: var(--c_court_green) ;
    font-weight: bold ;
    letter-spacing: 0.1em ;
    line-height: 110% ;
    text-align: left ;
    text-transform: none ;
}

article h1 {
    font-size: 200% ;
    /* font-variant: small-caps ; */
    margin-bottom: var(--w_bigskip) ;
    margin-top: calc( 3 * var(--w_bigskip) ) ;
}

article h2 {
    border-top-color: var(--c_court_green_ii) ;
    border-top-style: solid ;
    border-top-width: var(--w_thinlines) ;
    padding-top: var(--w_smallskip) ;
}

article h1 + h2 {
    border-top-style: none ;
    margin-bottom: var(--w_skip) ;
    margin-top: var(--w_bigskip) ;
}

article h2 {
    font-size: 144% ;
    margin-bottom: var(--w_skip) ;
    margin-top: calc( 2 * var(--w_bigskip) ) ;
}

article h2 + h3 {
    margin-bottom: 1.5ex ;
    margin-top: 2ex ;
}

article h3 {
    font-size: 120% ;
    margin-bottom: calc( ( var(--w_smallskip) + var(--w_skip) ) / 2 ) ;
    margin-top: calc( 3 * var(--w_bigskip) / 2 ) ;
}

article h3 + h4 {
    margin-bottom: var(--w_smallskip) ;
    margin-top: calc( var(--w_bigskip) / 2 ) ;
}

article h4 {
    font-size: 110% ;
    margin-bottom: var(--w_smallskip) ;
    margin-top: var(--w_bigskip) ;
}

article h4 + h5 {
    margin-bottom: 0ex ;
    margin-top: calc( var(--w_smallskip) / 2 ) ;
}

article h5 {
    font-size: 100% ;
    margin-bottom: 0ex ;
    margin-top: var(--w_smallskip) ;
}

/* h6 ist eingezogen */

article h6 {
    color: var(--c_court_green) ;
    font-size: 100% ;
    font-style: normal ;
    font-weight: bold ;
    float: left ;
    margin-bottom: 0ex ;
    margin-left: 0em ;
    margin-top: 0ex ;
    padding-bottom: 0ex ;
    padding-left: 0em ;
    padding-right: var(--w_indent) ;
    padding-top: 0ex ;
    vertical-align: baseline ;
}


/*
 * Absätze
 */

article p {
    margin-bottom: 0ex ;
    margin-top: var(--w_smallskip) ;
    text-indent: 0em ;
}

article p.separator {
    clear: both ;
    margin-bottom: var(--w_bigskip) ;
    margin-top: var(--w_skip) ;
    text-indent: 0em ;
}

article p.banner {
    background-image: url(index-bg.png) ;
    background-position: center ;
    background-repeat: no-repeat ;
    color: var(--c_document_bg) ;
    font-size: 248% ;
    font-weight: bold ;
    line-height: 130% ;
    padding-bottom: 220px ; ;
    padding-top: 220px ; ;
    text-align: center ;
}

article p.praeamble {
    font-style: italic ;
    margin-bottom: calc( 4 * var(--w_bigskip) ) ;
    margin-top: calc( 4 * var(--w_skip) ) ;
    padding-left: var(--w_indent) ;
    padding-right: var(--w_indent) ;
    text-align: center ;
    text-indent: 0em ;
}

article p.signature {
    clear: both ;
    margin-top: var(--w_bigskip) ;
    margin-bottom: var(--w_skip) ;
    text-indent: 0em ;
}

article p.signature::before {
    content: "(" ;
}
article p.signature::after {
    content: ")" ;
}

article p.ticker {
    clear: both ;
    border-bottom-style: solid ;
    border-bottom-width: var(--w_thinlines) ;
    border-color: var(--c_growing_elder_ii) ;
    border-top-style: solid ;
    border-top-width: var(--w_thinlines) ;
    font-variant: small-caps ;
    font-weight: bold ;
    margin-top: var(--w_bigskip) ;
    margin-bottom: var(--w_bigskip) ;
    padding-top: var(--w_smallskip) ;
    padding-bottom: var(--w_smallskip) ;
    text-align: center ;
}

article p.ticker::before {
    content: "+++ " ;
}
article p.ticker::after {
    content: " +++" ;
}

article .quote {
    padding-bottom: var(--w_skip) ;
    padding-left: var(--w_indent) ;
    padding-right: var(--w_indent) ;
    padding-top: var(--w_skip) ;
    text-indent: 0em ;
}

article .strongline {
    font-weight: bold ;
    padding-bottom: var(--w_skip) ;
    padding-left: var(--w_indent) ;
    padding-right: var(--w_indent) ;
    padding-top: var(--w_skip) ;
    /* text-align: center ; */
}


/* Audio, Photo, Video */

article audio ,
article video {
    display: block ;
    place-content: center ;
    margin-left: auto ;
    margin-right: auto ;
    padding-bottom: var(--w_skip) ;
    padding-top: var(--w_skip) ;
    text-align: center ;
}
article p.media {
    column-gap: 6% ;
    display: flex ;
    flex-direction: row ;
    flex-wrap: nowrap ;
    height: auto ;
    justify-content: space-between ;
    margin-left: auto ;
    margin-right: auto ;
    padding-bottom: var(--w_skip) ;
    padding-top: var(--w_skip) ;
    text-align: center ;
    max-width: calc( 5 * var(--w_grid_unit) - 2 * var(--w_indent) ) ;
}
article p.media + p.media {
    padding-top: 0ex ;
}
article p.media a::before ,
article p.media a::before {
    content: "" ;
}
article p.media a::after ,
article p.media a::after {
    content: "" ;
}
/* 600 x 1.2 = 720 */
article p.media a ,
article p.media audio ,
article p.media video ,
article p.media img {
    height: auto ;
    flex-basis: 100% ;
    flex-grow: 1 ;
    flex-shrink: 1 ;
    /*max-width: 720px ;*/
    max-width: calc( 5 * var(--w_grid_unit) - 2 * var(--w_indent) ) ;
    width: 100% ;
}
/* 360 x 1.2 = 432 */
article p.media img.large {
    flex-basis: 63% ;
    flex-grow: 2 ;
    flex-shrink: 1 ;
    /*max-width: 432px ;*/
    max-width: calc( 10 * var(--w_grid_unit) / 3 - 4 * var(--w_indent) / 3 ) ;
    width: 63% ;
}
/* 280 x 1.2 = 336 */
article p.media img.medium {
    flex-basis: 47% ;
    flex-grow: 1 ;
    flex-shrink: 1 ;
    /*max-width: 336px ;*/
    max-width: calc( 5 * var(--w_grid_unit) / 2 - var(--w_indent) ) ;
    width: 47% ;
}
/* 180 x 1.2 = 216 */
article p.media img.small {
    flex-basis: 30% ;
    flex-grow: 1 ;
    flex-shrink: 2 ;
    /*max-width: 216px ;*/
    max-width: calc( 5 * var(--w_grid_unit) / 3 - 2 * var(--w_indent) / 3 ) ;
    width: 30% ;
}


/* Kein Einzug */

article table p ,
article .display + p ,
article .quote + p ,
article .strongline + p ,
article .insideleft + p ,
article p.praeamble + p ,
article h1 + p ,
article h2 + p ,
article h3 + p ,
article h4 + p ,
article h5 + p ,
article h6 + p {
    text-indent: 0em ;
    margin-top: 0em ;
}


/* LISTEN UND ÄHNLICHE STRUKTUREN */


/* Gemeinsame Einstellungen */

article blockquote ,
article div.checklist ,
article dl ,
article ol ,
article ul {
    margin-bottom: var(--w_skip) ;
    margin-left: var(--w_indent) ;
    margin-right: 0em ;
    margin-top: var(--w_skip) ;
    padding-bottom: 0ex ;
    padding-left: 0em ;
    padding-right: 0em ;
    padding-top: 0ex ;
    text-indent: 0em ;
}


/* Numerierung */

article dl {
    list-style-position: inside ;
}

article ol {
    list-style-position: outside ;
    list-style-type: decimal ;
}

article ul {
    list-style-position: outside ;
    list-style-type: square ;
}

/* Beschreibende Listen */

article dd {
    margin-left: 0.5em ;
    padding-top: var(--w_smallskip) ;
    vertical-align: top ;
}

article dt {
    float: left ;
    font-weight: bold ;
    height: 0px ;
    margin-left: calc( -1 * var(--w_indent) ) ;
    padding-top: var(--w_skip) ;
    text-align: left ;
    vertical-align: top ;
}


/* Listenpunkte */

article li {
    color: var(--c_growing_elder_ii) ;
    margin-left: 0em ;
    margin-top: var(--w_smallskip) ;
}


/* Einzug, Textfarbe in Listen */

article dl p ,
article ol p ,
article ul p {
    text-indent:0em ;
}

article dd > p ,
article li > p ,
article li > div.checklist {
    color: var(--c_document_fg) ;
    margin-top: var(--w_smallskip) ;
}


/* 
 * Tabellen
 */

/* Ausrichtung */

thead ,
tbody ,
tfoot ,
td ,
th ,
tr {
    text-align: left ;
    vertical-align: top ;
}


/* Linien */

/* FIXME: MARGIN UND PADDING? */

article hr {
    background-color: var(--c_court_green_ii) ;
    height: var(--w_lines) ;
    margin-bottom: var(--w_skip) ;
    margin-left: var(--w_indent) ;
    margin-right: var(--w_indent) ;
    margin-top: var(--w_skip) ;
    padding-bottom: 0ex ;
    padding-left: var(--w_indent) ;
    padding-right: var(--w_indent) ;
    padding-top: 0ex ;
    text-align: center ;
    width: 90% ;
}

article hr.thick {
    height: var(--w_thicklines) ;
}

article hr.thin {
    height: var(--w_thinlines) ;
}


/* Schöne Tabellen mit thead, tfoot and tbody gestalten! */

article table.visible {
    border-bottom-style: solid ;
    border-bottom-width: var(--w_lines) ;
    border-collapse: collapse ;
    border-color: var(--c_growing_elder_ii) ;
    border-top-style: solid ;
    border-top-width: var(--w_lines) ;
    margin-bottom: var(--w_skip) ;
    margin-left: auto ;
    margin-right: auto ;
    margin-top: var(--w_skip) ;
    /* text-align: center ; */
}

article table.visible caption {
    font-size: 83% ;
    font-style: italic ;
    margin-bottom: var(--w_skip) ;
    margin-top: var(--w_smallskip) ;
    text-align: center ;
    vertical-align: bottom ;
}

article table.visible thead {
    padding-bottom: var(--w_smallskip) ;
}

article table.visible tfoot {
    padding-top: var(--w_smallskip) ;
}

article table.visible tbody {
    border-bottom-style: solid ;
    border-bottom-width: var(--w_lines) ;
    border-collapse: collapse ;
    border-color: var(--c_growing_elder_ii) ;
    border-spacing: 0px ;
    border-top-style: solid ;
    border-top-width: var(--w_thinlines) ;
    padding-left: 0.5em ;
    padding-right: 0.5em ;
}

article table.visible tbody th ,
article table.visible tfoot th ,
article table.visible thead th {
    font-weight: bold ;
    padding-bottom: var(--w_smallskip) ;
    padding-left: 0.5em ;
    padding-right: 0.5em ;
    padding-top: var(--w_skip) ;
    text-align: left ;
    vertical-align: middle ;
}

article table.visible tfoot td ,
article table.visible thead td {
    padding-bottom: var(--w_smallskip) ;
    padding-top: var(--w_smallskip) ;
    text-align: left ;
    vertical-align: top ;
}

article table.visible tbody td {
    padding-bottom: 0.5ex ;
    padding-top: 0.5ex ;
    text-align: left ;
    vertical-align: top ;
}

article table.visible tbody td ,
article table.visible tbody th ,
article table.visible tfoot td ,
article table.visible tfoot th ,
article table.visible thead td ,
article table.visible thead th {
    padding-left: 0.5em ;
    padding-right: 0.5em ;
}

article table.visible tbody tr.bottomrule {
    border-bottom-style: solid ;
    border-bottom-width: var(--w_thinlines) ;
    border-collapse: collapse ;
    border-color: var(--c_growing_elder_ii) ;
    border-spacing: 0px ;
}

article table.visible tbody tr.toprule {
    border-top-style: solid ;
    border-top-width: var(--w_thinlines) ;
    border-collapse: collapse ;
    border-color: var(--c_growing_elder_ii) ;
    border-spacing: 0px ;
}

/* Formulare */

article input.textfeld ,
article select.auswahlfeld ,
article select.textfeld ,
article textarea.textfeld {
    background-color: var(--c_off_white) ;
    border-color: var(--c_court_green) ;
    border-style: solid ;
    border-width: var(--w_lines) ;
    padding-bottom: 2px ;
    padding-top: 2px ;
    text-align: left ;
}

article input.textfeld ,
article select.textfeld ,
article textarea.textfeld {
    width: 90% ;
}

article select.auswahlfeld {
    width: 30% ;
}


/* Siehe div.checklist unter Listen; FIXME: margin-top wirkungslos? */

article div.checklist {
    display: table ;
    margin-left: 0em ;
    margin-top: 0ex ;
}

article div.checkitem {
    display: table-row ;
}

article div.checkitem div.mark {
    display: table-cell ;
    padding-right: 0.2em ;
    padding-top: 0.5ex ;
    text-align: right ;
    vertical-align: top ;
    width: 2.8em ;
}

article div.checkitem div.label {
    display: table-cell ;
    padding-top: 0.5ex ;
    vertical-align: top ;
}


/* Tabellen für Skalierungsitems in Umfragen */

article table.uscale {
    width: 100% ;
}

article table.uscale td.leftmark {
    text-align: right ;
    width: 16% ;
}

article table.uscale td.rightmark {
    text-align: left ;
    width: 16% ;
}

article table.uscale td {
    text-align: center ;
}

/* Ende */