/* !!!!! dekoration + farben + schrift der seitenelemente !!!!! ------------------------------------------------------------------------ */ /* ################################### basic--small #################################################################################### */ /* variablen +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* fonts ------------------------------------------------------------------------------------------------------------------------------- */ @font-face {font-family:'font-01';src: url('../fonts/font-01.woff2') format('woff2');font-display:swap} @font-face {font-family:'font-02';src: url('../fonts/font-02.woff2') format('woff2');font-display:swap} @font-face {font-family:'font-03';src: url('../fonts/font-03.woff2') format('woff2');font-display:swap} /* variablen - hintergrund ------------------------------------------------------------------------------------------------------------- */ :root {--bg-col-01:rgb(77,86,129); --bg-col-02:rgb(247,154,50); --bg-col-03:rgb(246,140,31);/* main verlauf farbe */ --bg-col-11:rgba(37,47,102);--bg-col-12:rgba(37,47,102,0.9); /* nav&banner transparenz farbe */ --bg-col-21:rgb(37,47,102); /* group farbe */ --bg-col-31:rgba(37,49,85); --bg-col-22:rgba(37,49,85,0.9); /* article transparenz farbe */ --ft-col-01:rgba(244,151,26)} /* schrift farbe */ /* variablen - rahmen ------------------------------------------------------------------------------------------------------------------ */ :root {--bd-col-11:rgb(0,0,0); /* nav&banner farbe */ --bd-stl-10:; /* nav&banner style */ --bd-rad-10:5px; /* nav&banner radius */ --bd-shw-10:inset 0 0 10px; /* nav&banner shadow */ --bd-col-20:rgb(0,0,0); /* group farbe */ --bd-stl-20:; /* group style */ --bd-rad-20:5px; /* group radius */ --bd-shw-20:inset 0 0 10px; /* group shadow */ --bd-col-30:rgb(0,0,0); /* article farbe */ --bd-stl-30:; /* article style */ --bd-rad-30:5px; /* article radius */ --bd-shw-30:0 0 5px} /* article shadow */ /* variablen - schrift ----------------------------------------------------------------------------------------------------------------- */ :root {--ft-col-01:rgba(244,151,26)} /* body farbe */ /* formatierung ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ /* tags + elemente - farbe,schrift ----------------------------------------------------------------------------------------------------- */ body {background-color:var(--bg-col-01);color:var(--ft-col-01); /* body */ font-family:font-01,Arial,Helvetica,sans-serif;text-align:center} main {background-attachment:fixed; /* main */ background:linear-gradient(to bottom,var(--bg-col-01) 30%,var(--bg-col-02),var(--bg-col-03))} footer {background-color:var(--bg-col-03)} /* footer */ article {background-color:var(--bg-col-31);border-radius:var(--bd-rad-30); /* footer */ box-shadow:var(--bd-shw-30) var(--bd-col-30)} h1 {font-family:font-02;font-size:2.8rem;white-space:pre-wrap;text-align:center;padding:1rem} /* ids --------------------------------------------------------------------------------------------------------------------------------- */ #kopf-01 {background:var(--bg-col-12);border-radius:var(--bd-rad-10);box-shadow:var(--bd-shw-10) var(--bd-col-11)} /* bannner */ #top-img {} /* header-logo */ #top-txt {font-size:clamp(0.70rem,1.7vw,0.95rem);line-height:0.8rem;text-align:left; /* schrift-header */ ul{margin:0 0 0 0.5em;padding:0.4em 0.4em 0.4em 1em}} #menu-01,#menu-02 {background:var(--bg-col-12);border-radius:var(--bd-rad-10);box-shadow:var(--bd-shw-10) var(--bd-col-11); /* nav-menu */ } #links-intern {} /*links-intern; parent:menu-01 */ #links-extern {} /*links-extern; parent:menu-01 */ #links-footer {} /*links-pflicht;parent:menu-02 */ #content {} /*inhalt parent: main */ #datenschutz {} /*datenschutz parent:content */ #impressum {} /*impressum; parent:content */ #formate {} /*formate; parent:content */ #konzerte {} /*konzerte; parent:content */ #termine {} /*termine parent:content */ #flyer {} /*flyer; parent:content */ #videos {} /*videos; parent:content */ /* klassen + container ----------------------------------------------------------------------------------------------------------------- */ .group-01 {background-color:var(--bg-col-21); /* group hintergrund */ border-radius:var(--bd-rad-20);box-shadow:var(--bd-shw-20) var(--bd-col-20)} /* group rahmen */ .txt-01,.txt-02 {} /* article info-text */ .plakate {} /* article flyer+poster */ .termine {} /* article termine */ .videos {} /* article videos */ .art-row-01 {font-size:0.9rem} /* klassen -- schrift - nur decoration.css --------------------------------------------------------------------------------------------- */ .text-01 {white-space:pre-wrap;text-align:center} /* inhalt zentriert schrift */ .text-02 {white-space:pre-wrap;text-align:justify;padding:1rem} /* inhalt zentriert schrift */ .text-03 {font-size:0.8rem ;text-align:center} /* inhalt blocksatz schrift */ .text-group {font-family:font-03;font-size:0.9rem;padding:1%;width:100%;padding:1%} /* titel gruppe schrift */ /* links ------------------------------------------------------------------------------------------------------------------------------- */ a:link {color:var(--ft-col-01)} /* normal link */ a:visited {color:orange} /* visited link */ a:hover {color:#f4ff1a} /* mouse over link */ a:active {color:blue} /* selected link */ .links-01 {font-family:font-02;font-size:clamp(1.5rem,2vw,2.5rem);letter-spacing:0.15rem} /* links schrift */ /* ################################### gestaltungshilfen ############################################################################### */ section {outline:0px solid white} main {outline:0px solid green} nav {outline:0px solid yellow} div {outline:0px solid red} article {outline:0px solid green} header {outline:0px solid black} footer {outline:0px solid grey} iframe {outline:0px solid orange} #content {outline:0px solid orange} #navigation {outline:0px solid white} #intern {}