.teilbereich {
        width: 100%;
        max-width: 980px;
        margin: 16px auto;
        padding: 5px;
        border-radius: 12px;
        box-shadow: 0 4px 8px #0000001a;
        padding: 20px;margin-bottom: 20px;
}

.offen
{color:green;}
.belegt
{color:red;}

.buttoneintragen
{
background-color: navy;
color:white;
--tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: .75rem;
  line-height: 1rem;
padding-top: .5rem;
  padding-bottom: .5rem;
  padding-left: 1rem;
  padding-right: 1rem;
border-color: transparent;
border-width: 1px;
border-radius: .375rem;
align-items: center;
display: inline-flex;
margin-top: .5rem;
}

.spalten {
        display: flex;
        flex-flow: row wrap;
        margin: 5px 0;
}
.aktionbox {
        flex: 1;
        margin: 10px;
        background-color: white;
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding-left: 10px;
  padding-right: 10px;
}


.aktionbox h2,
.aktionbox p {
        padding: 0 16px 8px;
}
.einzelne-schicht{
  width: 100%;
  border-radius: .25rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: lightgrey;
  padding: .5rem .75rem;
}
.schicht-aussen {
  width: 100%;
  border: none;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.schicht-innen {
  width: 100%;
  border: none;
display: flex;
align-items:
center;justify-content:
space-between;
  }

@media screen and (max-width: 992px) {
        .spalte {
                flex-basis: 40%;
                margin-bottom: 10px;
        }
}

@media screen and (max-width: 576px) {
        .spalte {
                flex-basis: 100%;
                margin-bottom: 10px;
        }
}

* {
        box-sizing: border-box;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
                Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body {
        color: #555;
        background-color: white;
}

h1 {
        padding: 10px;
}

.wrapper {
        width: 100%;
        max-width: 980px;
        margin: 16px auto;
        padding: 5px;
}

.columns {
        display: flex;
        flex-flow: row wrap;
        margin: 5px 0;
}

.column {
        flex: 1;
        margin: 10px;
        background-color: white;
  border: 1px solid #cccccc;
  border-radius: 4px;
}

.column .image {
        width: 100%;
        height: 300px;
        background-position: center;
        background-size: cover;
}

.column h2,
.column p {
        padding: 0 16px 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
}
tr {  padding: .5rem .75rem;}
/* Zebra striping */
tr:nth-of-type(odd) {
  background: #eee;
}
th {
  background: #333;
  color: white;
  font-weight: bold;
}
td, th {
  padding: 6px;
  border: 1px solid #ccc;
  text-align: left;
  border-radius: .25rem;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  padding: .5rem .75rem;
}

/* button */
.hover\:bg-gray-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.ease-in-out {
  transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.duration-150 {
  transition-duration: .15s;
}
.transition {
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.tracking-widest {
  letter-spacing: .1em;
}
.uppercase {
  text-transform: uppercase;
}
.font-semibold {
  font-weight: 600;
}
.text-xs {
  font-size: .75rem;
  line-height: 1rem;
}
.py-2 {
  padding-top: .5rem;
  padding-bottom: .5rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.bg-gray-800 {
  --tw-bg-opacity: 1;
  background-color: navy;
}
.border-transparent {
  border-color: transparent;
}
.border {
  border-width: 1px;
}
.rounded-md {
  border-radius: .375rem;
}
.items-center {
  align-items: center;
}
.inline-flex {
  display: inline-flex;
}
.mt-2 {
  margin-top: .5rem;
}
button, [role="button"] {
  cursor: pointer;
}
button, input:where([type="button"]), input:where([type="reset"]), input:where([type="submit"]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
button, select {
  text-transform: none;
}
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
    margin-top: 0px;
  padding: 0;
}
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}
/* button */
/* alles mögliche */
.booth-block .booth-capacity .volunteer-group .placeholder {
  width: 100%;
  border-radius: .25rem;
  border-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
  padding: .5rem .75rem;
}
.booth-block .booth-capacity {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}
*, ::before, ::after {
}
article, aside, details, div, dt, figcaption, footer, form, header, hgroup, html, main, nav, search, section, summary {
  display: block;
}
address, article, aside, blockquote, body, caption, center, col, colgroup, dd, dir, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, legend, li, listing, main, marquee, menu, nav, noframes, ol, p, plaintext, pre, search, section, summary, table, tbody, td, tfoot, th, thead, tr, ul, xmp {
  unicode-bidi: isolate;
}
body {
  font-family: Inter,sans-serif;
  color: navy;
}
body {
  line-height: inherit;
}
:root {
  --livewire-progress-bar-color: #2299dd;
}
html, :host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif;
  font-feature-settings: normal;
  font-variation-settings: normal;
}
:root {
  color: CanvasText;
}

/* alles mögliche */


@media screen and (max-width: 992px) {
        .column {
                flex-basis: 40%;
                margin-bottom: 10px;
        }
}

@media screen and (max-width: 576px) {
        .column {
                flex-basis: 100%;
                margin-bottom: 10px;
        }
}



/*
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

        /* Force table to not be like tables anymore */
        table, thead, tbody, th, td, tr {
                display: block;
        }

        /* Hide table headers (but not display: none;, for accessibility) */
        thead tr {
                position: absolute;
                top: -9999px;
                left: -9999px;
        }

        tr { border: 1px solid #ccc; }

        td {
                /* Behave  like a "row" */
                border: none;
                border-bottom: 1px solid #eee;
                position: relative;
                padding-left: 50%;
        }

        td:before {
                /* Now like a table header */
                position: absolute;
                /* Top/left values mimic padding */
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
        }

        /*
        Label the data
        */
        td:nth-of-type(1):before { content: "First Name"; }
        td:nth-of-type(2):before { content: "Last Name"; }
        td:nth-of-type(3):before { content: "Job Title"; }
        td:nth-of-type(4):before { content: "Favorite Color"; }
        td:nth-of-type(5):before { content: "Wars of Trek?"; }
        td:nth-of-type(6):before { content: "Secret Alias"; }
        td:nth-of-type(7):before { content: "Date of Birth"; }
        td:nth-of-type(8):before { content: "Dream Vacation City"; }
        td:nth-of-type(9):before { content: "GPA"; }
        td:nth-of-type(10):before { content: "Arbitrary Data"; }
}