/*
 Theme Name:   GTOS (Twenty Seventeen Child)
 Theme URI:    http://Startseite.de/
 Description:  Twenty Seventeen Child Theme
 Author:       et-agentur
 Author URI:   http://et-agentur.de/
 Template:     twentyseventeen
 Version:      1.0.0
 Tags:         Schlagwörter
 Text Domain:  German Translational Oligonucleotide Symposium
*/
/* 18. Juli 2026 12:34 */
 
@import url("../twentyseventeen/style.css");

html { scroll-behavior: smooth; }
 
/* = CSS
-------------------------------------------------------------- */
/* Colors
-------------------------------------------------------------- */
:root {
--blau-d: #0F2D4F;
--blau: #5C6B7A;
--blau-l: #EAF4FC;
--blau-vl: #F7FBFE;
--orange: #E8892E;
--orange-l: #DA863E;
--orange-vl: #FCEEDC;
--white: #FFFFFF;
--anthrazit: #cccccc;
--schwarz: #000000;
--blaufade:	linear-gradient(0deg,rgba(112, 130, 150, 1) 0%,rgba(58, 83, 111, 1) 29%, rgba(15, 45, 79, 1) 86%);
--blaufade-mirror:	linear-gradient(180deg,rgba(112, 130, 150, 1) 0%,rgba(58, 83, 111, 1) 29%, rgba(15, 45, 79, 1) 86%);
}
.has-gtos-blau-d-color {color: #0F2D4F}
.has-gtos-blau-d-background-color {background-color: #0F2D4F}
.has-gtos-blau-color {color: #5C6B7A}
.has-gtos-blau-background-color {background-color: #5C6B7A}
.has-gtos-blau-l-color {color: #EAF4FC}
.has-gtos-blau-l-background-color {background-color: #EAF4FC}
.has-gtos-blau-vl-color {color: #F7FBFE}
.has-gtos-blau-vl-background-color {background-color: #F7FBFE}
.has-gtos-orange-color {color: #E8892E}
.has-gtos-orange-background-color {background-color: #E8892E}
.has-gtos-orange-l-color {color: #DA863E}
.has-gtos-orange-l-background-color {background-color: #DA863E}
.has-gtos-orange-vl-color {color: #FCEEDC}
.has-gtos-orange-vl-background-color {background-color: #FCEEDC}
.has-gtos-white-color {color: #FFFFFF}
.has-gtos-white-background-color {background-color: #FFFFFF}
.has-gtos-anthrazit-color {color: #cccccc}
.has-gtos-anthrazit-background-color {background-color: #cccccc}
.has-gtos-schwarz-color {color: #000000}
.has-gtos-schwarz-background-color {background-color: #000000}
.has-blaufade-gradient-background { background-image: linear-gradient(0deg,rgba(112, 130, 150, 1) 0%,rgba(58, 83, 111, 1) 29%, rgba(15, 45, 79, 1) 86%) }	

.site-content-contain .wrap	{ width: 90vw; max-width: 90vw; margin-left:5vw}
@media screen and (min-width: 2132px) {
	.site-content-contain .wrap { width: 1920px; max-width:1920px; margin-left: calc(50vw - 960px); }
}

/* Header */
.site-header	{ background-color: white}
.site-header .custom-header	{ background-color: var(--blau); background: url("header-swash.svg") center bottom / cover no-repeat, var(--blaufade)}

.site-branding	{
	background-image: url("GTOS-Header.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto 60%;
	height:210px;
}

.site-branding .wrap	{ display: none }

@media screen and (max-width: 600px) {
	.site-branding { background-size: 90% auto }
}

/* END Header */

/* Footer */
.site-footer:before	{ content:""; background: url("header-swash-mirror.svg") center bottom / cover no-repeat; height:22px; width:100%}
.site-footer	{ background: var(--blau); background: var(--blaufade-mirror); border:none}
.site-footer *:not(.wrap):last-child	{ margin-bottom:0; padding-bottom:0 }
.site-footer .widget-area	{ padding: 0}
.site-footer .site-info	{width: 100%; text-align: center}
.site-footer	{ color:white }
.site-footer a	{ color: white; box-shadow: unset !important}
.site-footer a:hover	{ color: var(--orange) !important }
.site-footer .social-navigation	{ margin-top: 16px }
.site-info span[role=separator]	{ padding: 0 0.1rem }

.social-navigation a	{ background-color: rgba(255,255,255,0.33); transition: background-color 0.5s ease-in-out; }

/* --- Bluesky Hover-Effekt (Offizielles Bluesky-Blau) --- */
.social-navigation a[href*="bsky.app"]:hover {
    background-color: white;
	color: #0560ff !important;
}

/* --- X / Twitter Hover-Effekt --- */
/* Wenn dein Theme einen dunklen Hintergrund hat, nimm #ffffff (Weiß). 
   Wenn dein Theme hell ist, passt ein dunkles Anthrazit wie #222222 besser. */
.social-navigation a[href*="x.com"]:hover,
.social-navigation a[href*="twitter.com"]:hover {
    background-color: white;
    color: #000 !important; 
}

/* Nur das SVG-Icon im Social-Menü vergrößern */
.social-navigation .icon {
	height: 20px;
	top: 10px;
	width: 20px;
	vertical-align: top;
}
/* END Footer */

/* Navigation */
.navigation-top { background: transparent; border-width: 0px }
.navigation-top.site-navigation-fixed	{ z-index:1001; background-color: rgba(255,255,255,.66); background: linear-gradient(0deg,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 33%) }

/* search-form */
.navigation-top form.search-form	{ position: initial; position: absolute; top: 0; right: 10px; }
.navigation-top form.search-form button.search-submit	{ background-color: transparent; right: -5px; top: 10px; z-index:5 }
.navigation-top form.search-form button.search-submit svg	{ color: black; height: 20px; width: 20px }

.navigation-top form input { 
	width: 30px; max-width: 964px;
	position: absolute;
	padding-left: 20px;
	border-radius: 30px;
	border:1px solid transparent;
	background-color:white;
	right: 0;
	/* fill="#5C6B7A" -> fill="%235C6B7A" */
	background-image: url('data:image/svg+xml,<svg version="1.1" id="icon-search" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1190.6 841.9" fill="%235C6B7A" style="enable-background:new 0 0 1190.6 841.9;" xml:space="preserve"><path d="M741.8,390.9c0-58-20.6-107.5-61.8-148.7s-90.7-61.8-148.7-61.8c-58,0-107.5,20.6-148.7,61.8s-61.8,90.7-61.8,148.7c0,58,20.6,107.5,61.8,148.7s90.7,61.8,148.7,61.8s107.5-20.6,148.7-61.8C721.3,498.4,741.8,448.8,741.8,390.9z M982.4,781.7c0,16.3-6,30.4-17.9,42.3c-11.9,11.9-26,17.8-42.3,17.9c-16.9,0-31-6-42.3-17.9L718.8,663.4c-56.1,38.8-118.5,58.2-187.5,58.2c-44.8,0-87.6-8.7-128.5-26.1c-40.9-17.4-76.1-40.9-105.7-70.5c-29.6-29.6-53.1-64.8-70.5-105.7c-17.4-40.9-26.1-83.7-26.1-128.5c0-44.8,8.7-87.6,26.1-128.5s40.9-76.1,70.5-105.7c29.6-29.6,64.8-53.1,105.7-70.5s83.7-26.1,128.5-26.1s87.6,8.7,128.5,26.1c40.9,17.4,76.1,40.9,105.7,70.5s53.1,64.8,70.5,105.7s26.1,83.7,26.1,128.5c0,68.9-19.4,131.4-58.2,187.5L965,739.4C976.6,751,982.4,765.1,982.4,781.7L982.4,781.7z"/></svg>');
	background-size: 28px;
	background-position: -2px 12px;
	background-repeat: no-repeat;
	z-index:10;
}

.navigation-top form input:focus { width: 300px; width: calc(100vw - 40px); border:1px solid grey; background-color:white; background-position: 10000px; z-index: 0; transition: width 0.5s ease; }

@media screen and (max-width: 767px) {
	.navigation-top form.search-form	{ right: 10px; top: -5px; }
	.navigation-top form input			{ font-size:16px; line-height:17px }
	.navigation-top form input:focus	{ width: calc(100vw - 20px);  }
}
.site-header .navigation-top .menu-scroll-down	{ right: 4em }
/* END search-form */

/* aktives Element */
@media screen and (max-width: 64em) {
	.navigation-top .main-navigation a { padding: 1em .8em; }
}
.navigation-top .main-navigation a { color: var(--blau) }
.navigation-top .main-navigation .current-menu-item > a,
.navigation-top .main-navigation .current_page_item > a { color: var(--orange) }
.navigation-top .main-navigation a { position: relative;display: inline-block; margin-bottom: 18px; }
.navigation-top .main-navigation a::after {
	content: "";
	position: absolute;
	left: 1em;
	bottom: 10px; /* Abstand zum Text */
	width: 0px;
	height: 3px; /* Stärke des Unterstrichs */
	background-color: var(--orange);
	transition: width 0.4s ease-in-out;
}
.navigation-top .main-navigation a:hover::after { width: calc(100% - 2em) }

/* Internal / start */
.navigation-top a[href$="//gtos-symposium.de/"]	{ font-size: 0 }
.navigation-top a[href$="//gtos-symposium.de/"]:before { content: "\f015"; font-family: "fontawesome"; font-size:24px; font-size:1.5rem; vertical-align: -2px; }
.navigation-top a[href$="//gtos-symposium.de/"]::after {
	bottom: 0px !important; /* Abstand zum Text */
}

/* End Navigation */

/* full width */
body.page-template-template-full-width #content #primary {
	max-width: 100%;
}

body.page-template-template-full-width #content #primary .entry-header,
body.page-template-template-full-width #content #primary .entry-content {
    float: none;
    width: 100%;
}

body.page-template-template-full-width #content #primary .entry-header {
    margin-bottom: 4em;
}
body.page-template-template-login #content #primary {
	max-width: 100%;
}

body.page-template-template-login #content #primary .entry-header,
body.page-template-template-login #content #primary .entry-content {
    float: none;
    width: 100%;
}

body.page-template-template-login #content #primary .entry-header {
    margin-bottom: 4em;
}
/* END full width */

/* Typographie */
.page .panel-content .entry-title,
.page-title, body.page:not(.twentyseventeen-front-page) .entry-title	{
	font-size: 20px;
	font-size: 1.25rem;
	}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6	{ color: #1F497D; font-weight: 600}

/* Link */
.entry-content a { color: var(--orange); box-shadow:none; position: relative }
.entry-content :not(.wp-block-button):not(figure) > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px; /* Abstand zum Text */
	width: 0px;
	height: 3px; /* Stärke des Unterstrichs */
	background-color: currentcolor;
	transition: width 0.4s ease-in-out;
}
.entry-content a:hover { color: var(--orange-l); box-shadow:none }
.entry-content a:hover::after { width:100% }

/* END Typographie */

/* Allgemein */
body.page-template-template-full-width #content #primary .entry-header { margin-bottom: 1em }
body.home .entry-header	{ display: none }
.wp-block-column *:last-child	{ margin-bottom: 0 }
a.diss:hover	{ cursor: default ! important; }
/* a.diss öffnet Untermenü */
a.diss + button.dropdown-toggle:before	{ content:""; width:calc(100vw - 3.39em - 22px); height: 100%; display:inline-block; left:calc(3.39em + 22px - 100vw); top:0; position:absolute}
/* end a.diss öffnet Untermenü */
/* margins und paddings */
.mb_0	{ margin-bottom:0px !important}
.mb_5	{ margin-bottom:5px !important}
.mb_10	{ margin-bottom:10px !important}
.mb_15	{ margin-bottom:15px !important}
.mb_20	{ margin-bottom:20px !important}
.mb_30	{ margin-bottom:30px !important}
.mb_40	{ margin-bottom:40px !important}
.pb_0	{ padding-bottom:0px !important}
.pb_5	{ padding-bottom:5px !important}
.pb_10	{ padding-bottom:10px !important}
.pb_15	{ padding-bottom:15px !important}
.pb_20	{ padding-bottom:20px !important}
.pb_30	{ padding-bottom:30px !important}
.pb_40	{ padding-bottom:40px !important}
.mt_0	{ margin-top:0px !important}
.mt_5	{ margin-top:5px !important}
.mt_10	{ margin-top:10px !important}
.mt_15	{ margin-top:15px !important}
.mt_20	{ margin-top:20px !important}
.mt_30	{ margin-top:30px !important}
.mt_40	{ margin-top:40px !important}
.pt_0	{ padding-top:0px !important}
.pt_5	{ padding-top:5px !important}
.pt_10	{ padding-top:10px !important}
.pt_15	{ padding-top:15px !important}
.pt_20	{ padding-top:20px !important}
.pt_30	{ padding-top:30px !important}
.pt_40	{ padding-top:40px !important}
.pl_0	{ padding-left:0px !important}
.pl_5	{ padding-left:5px !important}
.pl_10	{ padding-left:10px !important}
.pl_15	{ padding-left:15px !important}
.pl_20	{ padding-left:20px !important}
.pl_30	{ padding-left:30px !important}
.pl_40	{ padding-left:40px !important}

.wp-block-group.has-background	{ padding: 16px }

.underline,
.underline-small{
	position: relative;
	display: inline-block;
	margin-bottom: 18px;
}
.underline::after,
.underline-small::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -5px; /* Abstand zum Text */
	width: 66px;
	height: 3px; /* Stärke des Unterstrichs */
	background-color: currentcolor;
	transition: width 0.4s ease-in-out;
}
.underline-small::after	{ width: 44px}
.underline-small:hover::after	{ width: 66px; max-width: 100% }
.underline:hover::after { width: 100px; max-width: 100% }

.ul-orange::after { background-color: var(--orange) }
.ul-blau::after { background-color: var(--blau) }

/* Startseite */
/* Buttons */
.wp-block-button a.has-gtos-orange-background-color:hover	{ border:1px solid var(--orange); background-color:white !important; color: var(--orange) }
.wp-block-button a.has-gtos-blau-d-background-color:hover	{ border:1px solid var(--blau-d); background-color:white !important; color: var(--blau-d) }

:root {
	--start-gap : 32px;
	--start-buttons-gap: 6px;
}
#Start { gap: 32px; margin-top: -3em;}
@media screen and (max-width: 959px) {
	#Start .wp-block-column:first-child	{ flex-basis: 33.333% !important } /* Logo */
	#Start .wp-block-column:first-child figure	{ max-width: 400px; margin: auto;}
	#Start .wp-block-column:last-child { flex-basis: 66.666% !important } /* Text und Buttons */
}
@media screen and (max-width: 479px) {
	#Start { margin-top: -1.5em;}
}
#Start .start-buttons	{ gap: 6px }
#Start .start-buttons .wp-block-button { flex-basis: calc((100% - 2 * 6px) / 3) }
#Start .start-buttons .wp-block-button a { margin-top: 0; padding: 0 16px; height: 44px; line-height: 16px }
@media screen and (max-width: 480px) { /* Butttons */
	#Start .start-buttons { flex-wrap: wrap }
	#Start .start-buttons .wp-block-button	{ flex-basis: calc((100% / 2) - 3px) }
	#Start .start-buttons .wp-block-button:first-child	{ flex-basis: 100% }
}
#AboutGTOS { gap: 16px; }
#AboutGTOS > .wp-block-column:first-child { background-image: url(/wp-content/uploads/2026/07/Graphic-DNA.svg); background-size: 80%; background-repeat: no-repeat; background-position: top 48px left 10%; padding-bottom: 16px; min-height: 192px; } 
#AboutGTOS > .wp-block-column:last-child	{ flex-basis: calc(100% - 176px) !important }
#AboutGTOS > .wp-block-column:last-child .Icon-Text .wp-block-column { }
#AboutGTOS .Icon-Text { gap:16px !important }
@media screen and (max-width: 1024px) {
	#AboutGTOS > .wp-block-column:first-child { background-image: none; padding-bottom: 16px; min-height:unset }
	#AboutGTOS { flex-wrap: wrap !important; background-image: url(/wp-content/uploads/2026/07/Graphic-DNA.svg); background-size: 96px;
background-repeat: no-repeat; background-position: top right; padding-top: 48px }
	#AboutGTOS > .wp-block-column { flex-basis: 100% !important }
	#AboutGTOS > .wp-block-column:first-child figure { display: none }
	#AboutGTOS > .wp-block-column:last-child	{ flex-basis: 100% !important }
}
@media screen and (max-width: 840px) {
	#AboutGTOS .Icon-Text { flex-wrap: wrap !important }
	#AboutGTOS .Icon-Text > .wp-block-column { flex-basis: 100% !important; max-width: 480px !important; margin: auto; }
}

#Committee	{ gap: 32px }
#Committee > .wp-block-column	{ flex-basis:calc((75% - 4 * 32px) / 4) !important }
#Committee > .wp-block-column:first-child	{ flex-basis: 25% !important }
@media screen and (max-width: 1024px) {
	#Committee	{ flex-wrap: wrap ! important }
	#Committee > .wp-block-column	{ flex-basis: calc((100% - 3 * 32px) / 4) !important }
	#Committee > .wp-block-column:first-child	{ flex-basis: 100% !important }
	#Committee > .wp-block-column:first-child br { display:none }
}
@media screen and (max-width: 768px) {
	#Committee > .wp-block-column	{ flex-basis: calc((100% -  32px) / 2) !important }
	#Committee > .wp-block-column:first-child	{ flex-basis: 100% !important }
}

#Program	{ gap: 16px }
#Program > .wp-block-column:first-child	{ flex-basis: 190px !important }
#Program > .wp-block-column:last-child	{ flex-basis: calc(100% - 190px - 16px) !important }
#Program .Program-Days .wp-block-columns { margin-bottom:16px }
#Program .Program-Days .wp-block-columns br { display:none }
#Program .Program-Days .wp-block-columns .wp-block-column:first-child	{ flex-basis: calc(100% - 70px - 16px) !important }
#Program .Program-Days .wp-block-columns .wp-block-column:last-child	{ flex-basis: 70px !important }
#Program .Program-Days p { margin-bottom: 6px; line-height: 22px }
@media screen and (max-width: 1440px) {
	#Program	{ flex-wrap: wrap !important }
	#Program > .wp-block-column:first-child,
	#Program > .wp-block-column:last-child	{ flex-basis: 100% !important }
}
@media screen and (max-width: 1090px) {
	#Program .Program-Days .wp-block-columns br { display:block }
}
@media screen and (max-width: 1024px) {
	#Program .Program-Days	{ flex-wrap: wrap !important }
	#Program .Program-Days .wp-block-columns br { display:none }
	#Program .Program-Days .wp-block-column	{ flex-basis: 100% !important }
}
#Speakers	{ column-gap: 16px; row-gap: 32px; }
#Speakers > .wp-block-column	{ flex-basis:calc((100% - 4 * 16px) / 4) !important }
#Speakers > .wp-block-column:first-child	{ flex-basis: 190px !important }
@media screen and (max-width: 1024px) {
	#Speakers	{ flex-wrap: wrap ! important }
	#Speakers > .wp-block-column	{ flex-basis: calc((100% - 3 * 16px) / 4) !important }
	#Speakers > .wp-block-column:first-child	{ flex-basis: 100% !important }
	#Speakers > .wp-block-column:first-child br { display:none }
}
@media screen and (max-width: 799px) {
	#Speakers > .wp-block-column	{ flex-basis: calc((100% -  16px) / 2) !important }
	#Speakers > .wp-block-column:first-child	{ flex-basis: 100% !important }
}

#Posters { gap: 16px; }
#Posters > .wp-block-column:first-child { flex-basis: 190px !important } 
#Posters > .wp-block-column:last-child	{ flex-basis: calc(100% - 206px) !important }
@media screen and (max-width: 1024px) {
	#Posters	{ flex-wrap: wrap ! important }
	#Posters > .wp-block-column:first-child { flex-basis: 100% !important }
	#Posters > .wp-block-column:last-child { flex-basis: 100% !important }
	#Posters > .wp-block-column:first-child .wp-block-columns .wp-block-column { flex-basis: calc((100% -  16px)/2) !important }
}

#Venue-Travel	{ gap: 16px }
#Venue-Travel > .wp-block-column:first-child	{ flex-basis: 190px !important }
#Venue-Travel > .wp-block-column:nth-child(2)	{ flex-basis: calc(100% - 2 * 16px - 590px) !important }
#Venue-Travel > .wp-block-column:last-child	{ flex-basis: 400px !important }
@media screen and (max-width: 1280px) {
	#Venue-Travel > .wp-block-column:not(:first-child)	{ flex-basis: calc((100% - 2*16px - 190px)/2) !important }
}
@media screen and (max-width: 1024px) {
	#Venue-Travel	{ flex-wrap: wrap !important; background-size: 100px; }
	#Sponsors .sponsors-buttons	{ width: 100% }
	#Venue-Travel > .wp-block-column:first-child { flex-basis: 100% !important  }
	#Venue-Travel > .wp-block-column:not(:first-child)	{ flex-basis: calc((100% - 2 * 16px)/2) !important }
}
@media screen and (max-width: 799px) {
	#Venue-Travel > .wp-block-column:not(:first-child)	{ flex-basis: 100% !important }
}

#Sponsors	{ gap: 16px }
#Sponsors > .wp-block-column:first-child	{ flex-basis: 190px !important }
#Sponsors > .wp-block-column:last-child	{ flex-basis: calc(100% - 190px - 16px) !important }
#Sponsors .sponsors-buttons { width: calc(100% + 150px) }
#Sponsors .sponsors-buttons .wp-block-button a { margin-top: 0; padding: 0 16px; height: 44px; line-height: 16px }
@media screen and (max-width: 1024px) {
	#Sponsors	{ flex-wrap: wrap !important; background-size: 100px; }
	#Sponsors .sponsors-buttons	{ width: 100% }
	#Sponsors > .wp-block-column:first-child { flex-basis: 100% !important; padding-top:60px  }
	#Sponsors > .wp-block-column:last-child	{ flex-basis: 100% !important; padding-right:0 }
}

#Sponsoring .wp-block-columns	{ gap:8px; padding: 16px 32px }
#Sponsoring .wp-block-columns .wp-block-column:first-child	{ flex-basis: 300px !important }
#Sponsoring .wp-block-columns .wp-block-column:last-child	{ flex-basis: calc(100% - 300px - 8px) !important }
@media screen and (max-width: 1024px) {
	#Sponsoring	.wp-block-columns { flex-wrap: wrap !important }
	#Sponsoring .wp-block-columns .wp-block-column	{ flex-basis: 100% }
}
/* Dissabled Button und Link */
.wp-block-button.dissabled a, .dissabled a { cursor: not-allowed !important}
.dissabled a:hover { color: unset }