/* !!!!! positionierung + ausrichtung der seitenelemente !!!!! ------------------------------------------------------------------------- */
/* ################################### basic--small #################################################################################### */

/* variablen +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
:root           {--size-top:80px;                                                                        /* höhe                  header */
                 --size-nav:70px;                                                                        /* höhe                     nav */
                 --size-sum:calc(var(--size-top) + var(--size-nav));                                     /* höhe        summe nav+header */
                 --space-01:0.4rem;                                                                      /* abstände                 nav */
                 --space-02:0.5rem}                                                                      /* abstände    innen   elemente */
                 
/* formatierung ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* tags + elemente --------------------------------------------------------------------------------------------------------------------- */
*               {margin:auto;padding:0;box-sizing:border-box;max-width:1000px}
body,header,nav,footer,main,section
                {display:flex;width:100%;align-items:center;margin-top:0}
body            {height:100vh;flex-direction:column}
header          {order:1;position:fixed;height:var(--size-top);margin-top:0.2rem}
main            {order:2;flex-direction:column;flex:1 0 auto}
nav             {order:1;position:fixed;height:var(--size-nav);margin-top:var(--size-top)}
footer          {order:4}
img             {max-width:100%;max-height:100%}
article         {display:flex;max-width:auto;margin:auto;padding:0.3rem;margin:0.5rem}
/* ids --------------------------------------------------------------------------------------------------------------------------------- */
#kopf-01        {height:inherit;padding:0.3rem;margin:0.5rem}                                            /* bannner       parent: header */
#top-img        {height:inherit;flex-grow:0;margin:0.5%;aspect-ratio:1 / 1 ;flex-grow:0;max-height:98%}  /* logo          parent:kopf-01 */
#top-txt        {flex-grow:1;margin-inline-start:5%;margin-top:1%}                                       /* text          parent:kopf-01 */
#menu-01        {order:3;flex-direction:column;padding:0.3rem;margin:0.5rem}                             /* navigation    parent:    nav */
#menu-02        {order:3;flex-direction:column;padding:0.3rem;margin:0.5rem}                             /* navigation    parent: footer */
#links-intern   {order:6}                                                                                /* links-intern  parent:menu-01 */
#links-extern   {order:7}                                                                                /* links-extern  parent:menu-01 */
#links-footer   {}                                                                                       /* links-pflicht parent:menu-02 */
#content        {order:2;flex-direction:column;margin-top:var(--size-sum);                               /* content       parent:   main */
                 padding:0 var(--space-02);width:100%;min-height:100vh}
#datenschutz    {}                                                                                       /* datenschutz group-01 content */
#impressum      {}                                                                                       /* impressum   group-01 content */
#formate        {}                                                                                       /* formate     group-01 content */
#konzerte       {order:1}                                                                                /* konzerte    group-01 content */
#termine        {order:3}                                                                                /* termine     group-01 content */
#flyer          {order:3}                                                                                /* flyer       group-01 content */
#videos         {order:3}                                                                                /* videos      group-01 content */
/* klassen + container ----------------------------------------------------------------------------------------------------------------- */
.group-01       {margin:0.5rem;padding:0.3rem;section{width:100%;flex-flow:column wrap}}                 /* gruppe section  innenabstand */
.con-txt        {container:info-txt/inline-size;width:100%}                                              /* container inhalt-> info-text */
.con-img        {container:plakate /inline-size;width:100%}                                              /* container inhalt->    grafik */
.con-lst        {container:termine /inline-size;width:100%}                                              /* container inhalt->    listen */
.videos         {container:videos  /inline-size;width:100%;height:100%;div{width:100%;                   /* container inhalt->    videos */
                 article{padding:1% var(--space-02);iframe{aspect-ratio: 16 / 9 }}}}
.art-txt-01     {flex-direction:column;div{margin-top:0}}                                                /* article   inhalt-> text  box */
.art-txt-02     {flex-direction:column;div{margin-top:0}}                                                /* article   inhalt-> text grow */
.art-col-01     {flex-direction:column;div{margin-top:0}}                                                /* article   inhalt-> liste col */
.art-row-01     {width:25rem;padding:var(--space-02)}                                                    /* article   inhalt-> liste row */
.art-img-01     {flex-direction:column;padding:var(--space-02)}                                          /* article   inhalt->    grafik */
/* ################################### media-queries ################################################################################### */
@media (width >= 700px) { /*-------------------------------------------------------------------------------------------------- break-700 */
main            {flex-direction:row}
nav             {width:auto;height:auto;position:sticky;top:var(--size-top)}                             /* navigation    parent:   main */
#menu-01        {width:120px;div{margin:var(--space-01) 0}}                                              /* navigation    parent:    nav */
#links-intern,#links-extern                                                                              /* links         parent:menu-01 */
                {flex-direction:column;margin:var(--space-01) 0}
#content        {margin-top:var(--size-top)}                                                             /* content       parent:   main */
.con-txt        {div{display:flex;flex-flow:row wrap}}                                                   /* content       parent:   main */
.con-lst        {div{display:flex;flex-flow:row wrap;justify-content:space-around}}                      /* content       parent:   main */
.con-img        {div{display:flex;flex-flow:row wrap;justify-content:center;article}}                    /* content       parent:   main */
.art-img-01     {width:25rem}                                                                            /* content       parent:   main */
.art-txt-01     {width:250px;height:300px}                                                               /* article            info-text */
                }

/* @container info-txt (width >= 580px) {article{width:250px;height:300px}}                                                      geplant */