/* MVP.css v1.6.3 - https://github.com/andybrewer/mvp */
@import url(mvp.css);

:root {
  --border-radius: 0;
  --box-shadow: 0;
  /* 2px 2px 10px; */
  --color: #118bee;
  --color-accent: #118bee15;
  --color-bg: rgb(255, 255, 255);
  --color-bg-secondary: #aaa;
  --color-secondary: #920de9;
  --color-secondary-accent: #920de90b;
  --color-shadow: #f4f4f4;
  --color-text: #000;
  --color-text-secondary: #999;
  --font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  --font-mono:
    SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
  --hover-brightness: 1.2;
  --justify-important: space-between;
  --justify-normal: left;
  --line-height: 1.5;
  --width-card: 215px;
  --width-card-medium: 460px;
  --width-card-wide: 800px;
  --width-content: 1080px;
  --width-content-column: 300px;
  --dlg-menu-jc: space-between;
}

/*
@media (prefers-color-scheme: dark) {
    :root {
        --color: #0097fc;
        --color-accent: #0097fc4f;
        --color-bg: #333;
        --color-bg-secondary: #555;
        --color-secondary: #e20de9;
        --color-secondary-accent: #e20de94f;
        --color-shadow: #bbbbbb20;
        --color-text: #f7f7f7;
        --color-text-secondary: #aaa;
    }
}
*/
* {
  box-sizing: border-box;
}

/*
https://www.codeinwp.com/snippets/sticky-footer-with-css/
https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers
*/
body {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: auto;
}

header,
footer {
  width: 100%;
}

main {
  flex: 1;
  width: 100%;
  min-height: calc(100vh - 150px);
}

body.admin main {
  max-width: 100%;
}

h1 {
  font-size: 3rem;
  margin-top: 0;
  line-height: 1;
  letter-spacing: -0.04em;
}

header {
  padding: 0 1rem;
}

footer {
  max-width: none;
  width: 100%;
  color: white;
  background-color: #000000;
  border-top: 1px solid black;
  display: flex;
  flex-wrap: wrap;
  font-size: smaller;
  justify-content: space-between;
  gap: 1rem;
  padding: 0;
}

footer .content {
  max-width: var(--width-content-column);
  /* margin: 0 auto; */
  padding: 1rem;
}

nav {
  margin-bottom: 0;
}

.a-content {
  margin-left: 20%;
  max-width: 42rem;
  line-height: 1.625;
}

#image {
  margin-bottom: 4rem;
}

.lighter {
  color: #999;
}

.maybenot {
  display: none;
}

section aside {
  margin: 0rem 0 7.2rem 0rem;
  padding: 0;
  border: 0;
}

section aside h3 {
  font-size: 24px;
}

section aside a {
  color: black;
  border-bottom: 3px solid white;
}

section aside a:hover {
  border-bottom: 3px solid #fff44b;
}

ul.tags {
  list-style-type: none;
  padding: 0;
}

ul.tags li {
  display: inline-block;
  background-color: black;
  color: white;
  padding: 2px 12px;
  margin: 3px 6px 3px 0;
}

ul.tags li a {
  color: white;
}

preis-rechner {
  display: block;
  margin-bottom: 1rem;
}

editor-table {
  table {
    border: 1px solid var(--color-bg-secondary);
    border-radius: var(--border-radius);
    border-spacing: 0;
    display: inline-block;
    /*max-width: 100%;
        overflow-x: auto;*/
    padding: 0;
    white-space: nowrap;
    font-feature-settings: "tnum";
  }

  td,
  th,
  tr {
    padding: 0.4rem 0.8rem;
    text-align: var(--justify-important);
  }

  thead {
    background-color: var(--color);
    border-collapse: collapse;
    border-radius: var(--border-radius);
    color: var(--color-bg);
    margin: 0;
    padding: 0;
  }

  thead th:first-child {
    border-top-left-radius: var(--border-radius);
  }

  thead th:last-child {
    border-top-right-radius: var(--border-radius);
  }

  thead th:first-child,
  tr td:first-child {
    text-align: var(--justify-normal);
  }

  tr:nth-child(even) {
    background-color: var(--color-accent);
  }

  tbody tr:hover {
    background-color: black;
    color: white;
  }
}

input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
}

input[type="checkbox"]+label {
  vertical-align: super;
}

dl {
  max-width: 50ch;
  display: grid;
  grid-template-columns: 100%;
  grid-template-columns: 130px 1fr;
  gap: 0;

  dd {
    margin: 0;
    padding-block: 0.5rem;
    font-weight: bold;
    border-bottom: 1px solid black;
  }

  dt {
    margin: 0;
    padding-block: 0.5rem;
    border-bottom: 1px solid black;
  }
}

h2 {
  font-size: 1rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.invalid-feedback {
  background-color: tomato;
  color: white;
  padding: 1rem;
  border-radius: 3px;
  max-width: 40ch;
}

form.details {
  max-width: 500px;
}

div.actions {
  margin-block: 1rem;
  display: flex;
  justify-content: space-between;
}

/*
confirm dialog 
*/

[data-component*="dialog"] * {
  box-sizing: border-box;
  outline-color: var(--dlg-outline-c, hsl(218, 79.19%, 35%));
}

:where([data-component*="dialog"]) {
  --dlg-gap: 1em;
  background: var(--dlg-bg, #fff);
  border: var(--dlg-b, 0);
  border-radius: var(--dlg-bdrs, 0.25em);
  box-shadow: var(--dlg-bxsh, 0px 25px 50px -12px rgba(0, 0, 0, 0.25));
  font-family: var(--dlg-ff, ui-sansserif, system-ui, sans-serif);
  min-inline-size: var(--dlg-mis, auto);
  padding: var(--dlg-p, var(--dlg-gap));
  width: var(--dlg-w, fit-content);
}

:where([data-component="no-dialog"]:not([hidden])) {
  display: block;
  inset-block-start: var(--dlg-gap);
  inset-inline-start: 50%;
  position: fixed;
  transform: translateX(-50%);
}

:where([data-component*="dialog"] menu) {
  display: flex;
  gap: calc(var(--dlg-gap) / 2);
  justify-content: var(--dlg-menu-jc, flex-end);
  margin: 0;
  padding: 0;
}

:where([data-component*="dialog"] menu button) {
  background-color: var(--dlg-button-bgc);
  border: 0;
  border-radius: var(--dlg-bdrs, 0.25em);
  color: var(--dlg-button-c);
  font-size: var(--dlg-button-fz, 0.8em);
  padding: var(--dlg-button-p, 0.65em 1.5em);
}

:where([data-component*="dialog"] [data-ref="accept"]) {
  --dlg-button-bgc: var(--dlg-accept-bgc, hsl(218, 79.19%, 46.08%));
  --dlg-button-c: var(--dlg-accept-c, #fff);
}

:where([data-component*="dialog"] [data-ref="cancel"]) {
  --dlg-button-bgc: var(--dlg-cancel-bgc, transparent);
  --dlg-button-c: var(--dlg-cancel-c, inherit);
}

:where([data-component*="dialog"] [data-ref="fieldset"]) {
  border: 0;
  margin: unset;
  padding: unset;
}

:where([data-component*="dialog"] [data-ref="message"]) {
  font-size: var(--dlg-message-fz, 1.25em);
  margin-block-end: var(--dlg-gap);
}

:where([data-component*="dialog"] [data-ref="template"]:not(:empty)) {
  margin-block-end: var(--dlg-gap);
  width: 100%;
}

/* hack for Firefox */
@-moz-document url-prefix() {
  [data-component="no-dialog"]:not([hidden]) {
    inset-inline-start: 0;
    transform: none;
  }
}

/* added to `body` when browser do not support `<dialog>` */
.dialog-open {
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* FOR DEMO */
[name="prompt"] {
  border: 1px solid silver;
  padding: 0.6em 1em;
  width: 100%;
}

.custom {
  --dlg-accept-bgc: hsl(159, 65%, 75%);
  --dlg-accept-c: #000;
  --dlg-bg: linear-gradient(to bottom right, #00f5a0, #00d9f5);
  --dlg-button-p: 0.75em 2em;
  --dlg-outline-c: #00d9f5;
}

.custom input {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 0.25em;
  border: 0;
  display: block;
  margin-block: 0.5em 1em;
  padding: 0.75em 1em;
  width: 100%;
}

.custom label {
  display: block;
  font-size: small;
}