:root              { --text: #333; --akzent: #aae; --upd: #aea; --bg: #eee; --shadow: #ccc; }
:root              { --statePoll: #eef; --stateData: #fff; --stateErr: #f44; }
@font-face         { font-family: "plexmono"; src: url("fonts/IBMPlexMono-Regular.ttf"     ); }
@font-face         { font-family: "plexbold"; src: url("fonts/IBMPlexMono-SemiBold.ttf"    ); }
@font-face         { font-family: "caveat";   src: url("fonts/Caveat-VariableFont_wght.ttf"); }


@font-face { font-family: 'Roboto'; src: url('fonts/Roboto-Light.ttf') format('truetype'); font-weight: normal; font-style:  normal; }
p, a, ul, ol, li { font-family: 'Roboto', sans-serif; }
body { font-family: 'Roboto', sans-serif; }

@font-face { font-family: 'RobotoBold'; src: url('fonts/Roboto-Bold.ttf') format('truetype'); font-weight: normal; font-style:  normal; }
a { font-family: 'RobotoBold', sans-serif; color: var(--akzent); }

@font-face { font-family: 'RobotoMono'; src: url('fonts/RobotoMono-Light.ttf') format('truetype'); font-weight: normal; font-style:  normal; }
code { font-family: 'RobotoMono', monospace; }

@font-face { font-family: 'RobotoSlab'; src: url('fonts/RobotoSlab-Light.ttf') format('truetype'); font-weight: normal; font-style:  normal; }


body               { margin: 0px; padding: 0px; }
/*body               { font-family: plexmono; font-size: 12pt; color: var(--text  ); }*/
header             { position: fixed; top: 0.0rem; height: 2.0rem; width: 100vw; z-index: 42; }
header             { font-family: caveat; font-size: 20pt; }
header             { background: var(--akzent); text-align: center; margin-bottom: 0.5rem; }
header label       { margin-right: 1.5rem; white-space: nowrap; }

nav                { position: fixed; top: 2.0rem; height: 1.5rem; width: 100vw; z-index: 42; }
nav                { background: var(--akzent); text-align: center; margin-bottom: 0.5rem; }
nav a              { font-family: 'Roboto', sans-serif; color: var(--text); }
nav span           { margin: 0rem 1rem; }
#polling           { position: absolute; top: 0.3rem; right: 1.2rem; font-size: 1.2rem; }
main               { margin-top: 2.5rem; }
main               { padding: 0px 8px; display: grid; gap: 8px; }

  main             { grid-template-columns: 1fr 1fr 1fr; }
  .feature { grid-column-end: span 3; }
  .detail  { grid-column-end: span 1; }

@media (max-width: 1280px) {
  main             { grid-template-columns: 3fr; }
  .feature { grid-column-end: span 3; }
  .detail  { grid-column-end: span 3; }
}

body    { background: url("bgHalf.jpg") center/cover no-repeat fixed; }

.hero   { /*background: url("hero.jpg") center/cover no-repeat;*/ min-height: 40vh; display: flex; align-items: center; justify-content: center; }
.hero   { font-size: 2.0rem; }
.hero p { text-align: center; line-height: 1.4em; }
.hero p { background: rgba(255,255,255,0.8); box-shadow: 0.0rem 0.0rem 1.0rem 0.5rem rgba(255,255,255,0.8); padding: 1rem; }

section             { display: inline-block; margin: 0px; }
section             { border: 1px solid var(--akzent); border-radius: 0.3rem; padding: 0.3rem; }
section             { background: var(--bg); box-shadow: 0.0rem 0.3rem 0.6rem 0.0rem var(--shadow); }

section             { margin: 4rem 1rem; }

section             { padding: 0px 8px; display: grid; gap: 8px; }
section.feature     { grid-template-columns: 1fr 3fr; }
section.detail      { grid-template-columns: 1fr 1fr; }

section h1, section h2 { grid-column: 1 / -1; }
section h1, section h2 { font-family: "caveat";  font-size: 20pt; color: var(--akzent); margin: 0.00em 0.00em -0.25em 0.00em; }
section img            { font-size: 0.8rem; } /* alt-Text  */
section img            { border-radius: 1.0rem; }
section figcaption     { font-size: 0.8rem; } /* Bildzeile */
section li             { font-size: 1.2rem; margin-bottom: 0.4rem; } /* Buletten  */