/* IconScreen.de, Matthias Ring, 05.2021/05.2022/7.2023/7.2023; one BreakPoint - 480  */

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

body { 
font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
font-size: 1.2em; line-height: 1.4; font-weight: 400; }

@media (max-width: 480px) { body { font-size: 1.1em; line-height: 1.6; } }

main { margin: 0 1em; }

h1, h2, b, strong { font-weight: 700; color: var(--schwarz); }
h1 { text-align: center; font-size: 2.2em; line-height: 1.1; margin-bottom: 0; }
.intro h2 { font-size: 1.2em; line-height: 1.1; }
.small { font-size: 0.875em; color: var(--dunkelgrau); }
@media (max-width: 480px) { h1 { font-size: 1.5em;  } 
.intro h2 { font-size: 0.8em; } }

h2 { text-align: center; }
p, td { hyphens: auto; }

a, .icon-link, .svg-mail { color: var(--link); fill: var(--link); text-decoration: none; }
a:focus, a:hover, .current, .icon-link:hover { text-decoration: none; color: var(--linkhover);  border-bottom: 2px solid var(--linkhover); }
a:hover .svg-mail { fill: var(--linkhover); }

/* Hero, Animation ------------------------------------------------------------------- */

.hero-image { width: 100%; height: auto; display: block; z-index:1; margin-left: auto; margin-right: auto; }

/* Toggle Text; more bottom --------------------------------------------------------- */
button.toggle-text, a.button { margin-right: 8px; user-select: none; border-width: 2px; border-style: solid; border-radius: 1em; border-color: var(--link); color: var(--link); background: none; letter-spacing: 1px; padding: 7px 11px 8px 11px; word-spacing: 1px; overflow: hidden; cursor: pointer; display: inline-block; font-size: 0.9em; }

button.toggle-text:hover, a.button:hover { border-color: var(--linkhover); background: var(--linkhover); color: var(--weiss); }
a.active { border-color: var(--schwarz); background: var(--schwarz); color: var(--weiss); }
div.center { display: block; text-align: center; margin-top: 3em; padding-top: 2em; border-top: 2px solid var(--schwarz) }

/* Header, Sections, Footer --------------------------------------------------------- */
header { position: relative; margin: 0 auto 0 auto; }
section.intro { margin: 4em auto 0 auto; max-width: 45em; }
@media (max-width: 480px) { section.intro { margin: 2em auto 0 auto; } }
section.accordion { max-width: 52em; margin: 6em auto 0 auto; }
section.download { margin:  6em auto 0 auto; max-width: 45em; text-align: center; }
section.share { margin:  6em auto 0 auto; max-width: 45em; text-align: center; }
section.veranstalter { margin:  6em auto 0 auto; max-width: 45em; }
section.logos { margin:  2em auto 0 auto; max-width: 45em; }
section.impressum { margin:  6em auto 0 auto; max-width: 45em; }
section.archive { margin:  6em auto 0 auto; max-width: 45em; text-align: center; }
section.datenschutz { margin:  6em auto 0 auto; max-width: 45em; }
footer { margin: 6em auto 16em auto; max-width: 45em; text-align: center; }
section.logos h2 { display: none; }

/* Logos ----------------------------------------------------------------------------- */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); grid-gap: 1rem; }

@media (max-width: 480px) { .logos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));  } }

.logos > div { background-color: var(--hellgrau); padding: 0.5rem; position: relative; }
.logos > div:hover { background-color: #d49dd4; }
.logos > div:hover img { opacity: .6; filter: grayscale(90%); }
.logos > div::before { content: ""; display: block; padding-bottom: 100%; }
.logos > div img { position: absolute; max-width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* SVG Icons ------------------------------------------------------------------------- */
.svg-icon { fill: var(--link); width: 50px; height: 50px; }
td a.share .svg-icon { width: 35px; height: 35px; margin-right: 7px; }
td a.sharetwitter { padding-right: 1em; }
.svg-icon:hover { fill: var(--linkhover); }

.svg-phone, .svg-mail { width: 18px; height: 18px; margin-bottom: -2px; }
.svg-phone { fill: var(--scharz);  }


@media (max-width: 480px) { .svg-phone, .svg-mail { fill: var(--link); } .icon-link {  font-weight: bold; } }

/* accordion ------------------------------------------------------------------------- */
.accordion__header { border-top: 1px solid var(--link); }
.accordion__header:first-child { border-top: none !important; }
.accordion__panel { border-top: 1px solid var(--link); background-color: var(--hellgrau); padding: 0 1em 2em 1em; }
@media (max-width: 480px) { .accordion__panel { padding: 0 0 2em 0; } }

.accordion__panel p, .accordion__header button { padding: 0 0.5em; }

/* accordion table */
table { width: 100%; margin-bottom: 2em; margin-top: 1.5em; margin-left: 6px; padding-top: 1.5em; border-top: 1px solid var(--dunkelgrau); padding-top: 1.5em; }
th { width: 30%; font-weight: bold; text-align: left; border-bottom: 1px solid var(--mittelgrau); padding-bottom: 8px; padding-bottom: 8px; }
td { border-bottom: 1px solid var(--mittelgrau); padding-bottom: 8px; padding-left: 8px;}
tr:last-child th, tr:last-child td { border-bottom: none; }
tr:hover { background-color: rgba(255,255,255,0.3); } 
@media (max-width: 480px) { table { font-size: 0.9em; } }

/* accordion heading, sub-heading */
.headline { font-size: 1.2em; line-height: 1.1; font-weight: normal; display: block; padding: 1.5em 2em 0 0.375em; }
@media (max-width: 480px) { .headline { line-height: 1.25; } }

.sub-headline { font-size: 0.8em; font-weight: normal; display: block; padding: 0 4em 0 0.5em;}
.first { margin-left: 0.4em; }
td.teilen { text-align: center; padding-top: 0.5em; }

/* accordion button */
em { margin-right: 8px; margin-left: 8px; margin-top: 12px; user-select: none; border-width: 1px; border-style: solid; border-radius: 1em; border-color: var(--dunkelgrau); color: var(--dunkelgrau); letter-spacing: 1px; 
padding: 6px 11px; word-spacing: 1px; overflow: hidden; cursor: pointer; display: inline-block; font-size: 0.6em; }
em.time { color: var(--dunkelgrau); border-color: var(--dunkelgrau); }
em.theme { color: var(--weiss); background-color: var(--dunkelgrau); }

/* accordion function */
.accordion__header { position: relative; cursor: pointer;  }

button svg { position: absolute; right: 1.2em; top: 50%; height: 1.75em; transform: translateY(-50%);  }
.accordion__header button { display: block; all: inherit; padding: 1em 0 1em 4px; width: 100%; }

.accordion__header button { color: var(--link);  }
.accordion__header button:hover { background-color: var(--link); }
.accordion__header button:hover em.time, .accordion__header button:hover .headline, .accordion__header button:hover .sub-headline { color: var(--weiss); border-color: var(--weiss); }

.accordion__header button:focus { background-color: var(--link); color: var(--weiss); }
.accordion__header button:focus em.time, .accordion__header button:hover em.time { color: var(--weiss); border-color: var(--weiss); }

[aria-expanded="true"] .vert { display: none; }
[aria-expanded] rect { fill: currentColor; }
.accordion__header:target [aria-expanded] rect { fill: white; }
.accordion__header button:hover rect { fill: white; }

/* accordion colored a target from anchor click */
.accordion__header:target, .accordion__header:target :hover { background-color:var(--link);  }
.accordion__header:target .headline { color: var(--weiss); }
.accordion__header:target .sub-headline { color: var(--weiss); }
.accordion__header:target em.time { color: var(--weiss); border-color: var(--weiss); }

@media print { header, section.intro, #PROGRAMM, section.download, section.share, section.veranstalter, section.logos, section.impressum, section.datenschutz, footer, svg, .noprint { display: none; } }


.fulltext [hidden] { display: none; }