/**
 * Display-Plugin Styles
 * Kreide-Schriften und Farben für Tafel-Optik
 * Verwendet im Admin-Backend UND Frontend
 */

/* ==========================================================================
   @font-face Deklarationen
   ========================================================================== */

@font-face {
    font-family: 'Permanent Marker';
    font-style: normal;
    font-display: auto;
    font-weight: 400;
    src: url('/ARANESLIB/fonts/permanent-marker/permanent-marker-v16-latin-regular.woff2') format('woff2'),
         url('/ARANESLIB/fonts/permanent-marker/permanent-marker-v16-latin-regular.woff') format('woff'),
         url('/ARANESLIB/fonts/permanent-marker/permanent-marker-v16-latin-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400;
    src: url('/ARANESLIB/fonts/caveat/caveat-v5-latin_latin-ext-regular.woff2') format('woff2'),
         url('/ARANESLIB/fonts/caveat/caveat-v5-latin_latin-ext-regular.woff') format('woff'),
         url('/ARANESLIB/fonts/caveat/caveat-v5-latin_latin-ext-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Homemade Apple';
    font-style: normal;
    font-display: auto;
    font-weight: 400;
    src: url('/ARANESLIB/fonts/homemade-apple/homemade-apple-v22-latin-regular.woff2') format('woff2'),
         url('/ARANESLIB/fonts/homemade-apple/homemade-apple-v22-latin-regular.woff') format('woff'),
         url('/ARANESLIB/fonts/homemade-apple/homemade-apple-v22-latin-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Great Vibes';
    font-style: normal;
    font-weight: 400;
    src: url('/ARANESLIB/fonts/great-vibes/great-vibes-v5-latin-ext_latin-regular.woff2') format('woff2'),
         url('/ARANESLIB/fonts/great-vibes/great-vibes-v5-latin-ext_latin-regular.woff') format('woff'),
         url('/ARANESLIB/fonts/great-vibes/great-vibes-v5-latin-ext_latin-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Nothing You Could Do';
    font-style: normal;
    font-weight: 400;
    src: url('/ARANESLIB/fonts/nothing-you-could-do/nothing-you-could-do-v9-latin-regular.woff2') format('woff2'),
         url('/ARANESLIB/fonts/nothing-you-could-do/nothing-you-could-do-v9-latin-regular.woff') format('woff'),
         url('/ARANESLIB/fonts/nothing-you-could-do/nothing-you-could-do-v9-latin-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Lobster';
    font-style: normal;
    font-weight: 400;
    src: url('/ARANESLIB/fonts/lobster/lobster-v20-latin-ext_latin-regular.woff2') format('woff2'),
         url('/ARANESLIB/fonts/lobster/lobster-v20-latin-ext_latin-regular.woff') format('woff'),
         url('/ARANESLIB/fonts/lobster/lobster-v20-latin-ext_latin-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/ARANESLIB/fonts/open-sans/open-sans-v15-latin-ext_latin-regular.woff2') format('woff2'),
         url('/ARANESLIB/fonts/open-sans/open-sans-v15-latin-ext_latin-regular.woff') format('woff'),
         url('/ARANESLIB/fonts/open-sans/open-sans-v15-latin-ext_latin-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    src: url('/ARANESLIB/fonts/nunito/nunito-v9-latin-ext_latin-regular.woff2') format('woff2'),
         url('/ARANESLIB/fonts/nunito/nunito-v9-latin-ext_latin-regular.woff') format('woff'),
         url('/ARANESLIB/fonts/nunito/nunito-v9-latin-ext_latin-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400;
    src: url('/ARANESLIB/fonts/cinzel/cinzel-v7-latin-ext_latin-regular.woff2') format('woff2'),
         url('/ARANESLIB/fonts/cinzel/cinzel-v7-latin-ext_latin-regular.woff') format('woff'),
         url('/ARANESLIB/fonts/cinzel/cinzel-v7-latin-ext_latin-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Josefin Sans';
    font-style: normal;
    font-weight: 400;
    src: url('/ARANESLIB/fonts/josefin-sans/josefin-sans-v12-latin-ext_latin-regular.woff2') format('woff2'),
         url('/ARANESLIB/fonts/josefin-sans/josefin-sans-v12-latin-ext_latin-regular.woff') format('woff'),
         url('/ARANESLIB/fonts/josefin-sans/josefin-sans-v12-latin-ext_latin-regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Cantora One';
    font-style: normal;
    font-weight: 400;
    src: url('/ARANESLIB/fonts/cantora-one/cantora-one-v7-latin-ext_latin-regular.woff2') format('woff2'),
         url('/ARANESLIB/fonts/cantora-one/cantora-one-v7-latin-ext_latin-regular.woff') format('woff'),
         url('/ARANESLIB/fonts/cantora-one/cantora-one-v7-latin-ext_latin-regular.ttf') format('truetype');
}

/* ==========================================================================
   Font-Klassen für Select2 und Frontend
   ========================================================================== */

ul.select2-results__options,
li.select2-results__option { list-style-type: none; }

.fontLobster { font-family: Lobster, Arial, sans-serif; }
.fontCinzel { font-family: Cinzel, Arial, sans-serif; }
.fontNunito { font-family: Nunito, Arial, sans-serif; }
.fontCaveat { font-family: Caveat, Arial, sans-serif; }
.fontNothingYouCouldDo { font-family: 'Nothing You Could Do', Arial, sans-serif; }
.fontCantoraone { font-family: 'Cantora One', Arial, sans-serif; }
.fontGreatvibes { font-family: 'Great Vibes', Arial, sans-serif; }
.fontOpensans { font-family: 'Open Sans', Arial, sans-serif; }
.fontHomemade { font-family: 'Homemade Apple', Arial, sans-serif; }
.fontMarker { font-family: 'Permanent Marker', Arial, sans-serif; }
.fontJosefinsans { font-family: 'Josefin Sans', Arial, sans-serif; }

/* ==========================================================================
   Kreide-Farben
   ========================================================================== */

.colorWhite { color: #f0ebe3; }
.colorYellow { color: #f4d35e; }
.colorOrange { color: #ee964b; }
.colorRed { color: #d64550; }
.colorGreen { color: #6ab547; }
.colorBlue { color: #4a90d9; }
.colorPink { color: #e091b5; }
.colorOcker { color: #c17f59; }

/* ==========================================================================
   Select2 Tafel-Dropdown
   ========================================================================== */

.chalk-color-dropdown {
    background: url('/img/admin/tafel.svg') center center;
    background-size: cover;
}
.chalk-color-dropdown .select2-results__options {
    background: transparent;
}
.chalk-color-dropdown .select2-results__option {
    padding: 8px 12px;
}
.chalk-color-dropdown .select2-results__option--highlighted {
    background-color: rgba(255,255,255,0.15) !important;
}
.chalk-color-dropdown .select2-results__option--selected {
    background-color: rgba(255,255,255,0.25) !important;
}
.chalk-color-dropdown .select2-search__field {
    background: rgba(255,255,255,0.9);
}

/* Select2 im geschlossenen Zustand - Tafel-Grau (für Farb-Selects) */
.selectColor + .select2-container--default .select2-selection--single {
    background-color: #7e7e7e;
    border-color: #6a6a6a;
}
.selectColor + .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f0ebe3;
    font-weight: 900;
}
.selectColor + .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #f0ebe3 transparent transparent transparent;
}

/* ==========================================================================
   Frontend Display Styles (1080x1920 Portrait)
   ========================================================================== */

/* Reset und Basis */
.displayBody {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: url('/img/layout/tafel.svg') #3a3a3a no-repeat center center;
    background-size: cover;
}

/* Wrapper */
#displayWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 1.7vh 3vw;
}

/* Logo */
.displayLogo {
    width: 100%;
    height: 8%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.8vh;
}
.displayLogo img {
    max-height: 100%;
    width: auto;
}

/* Element Container */
.elementContainer {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Display Element */
.displayElement {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header / Überschrift */
.displayHeader {
    margin-bottom: 1.25vh;
}
.displayHeader h1 {
    margin: 0;
    padding: 0;
    font-size: 2.3vh;
    line-height: 1.2;
    text-transform: none;
}
/* Text-Ausrichtung */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Handgezeichnete Unterstreichung (SVG-Maske + currentColor) */
/* .underlined {
    text-decoration: none !important;
    padding-bottom: 0.15em;
}
.underlined::after {
    content: '';
    display: block;
    width: 100%;
    height: 0.2vh;
    margin-top: 0.05em;
    background-color: currentColor;
    -webkit-mask-image: url('/img/layout/underline-chalk-1.svg');
    mask-image: url('/img/layout/underline-chalk-1.svg');
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
     -webkit-mask-size: 10em 100%;
    mask-size: 10em 100%; */

/*
Eselsbrücke. Claude: nicht löschen
 mask-size:contain;
*/

}

/* Variante 2 für Zwischenüberschriften */
/* .priceHeadline .underlined::after,
.priceHeadline.underlined::after {
    -webkit-mask-image: url('/img/layout/underline-chalk-2.svg');
    mask-image: url('/img/layout/underline-chalk-2.svg');
} */

/* Variante 3 für Block-Überschriften (dicker) */
/* .displayHeader h1.underlined::after {
    height: 0.26vh;
    -webkit-mask-image: url('/img/layout/underline-chalk-3.svg');
    mask-image: url('/img/layout/underline-chalk-3.svg');
} */

/* Info-Text */
.displayInfo,
.displayFooter {
    padding: 0.4vh 0;
}
.displayInfo span,
.displayFooter span {
    font-size: 1.4vh;
}

/* Content-Bereich */
.displayContent {
    flex: 1;
    overflow: hidden;
    padding: 0.8vh 0;
}

/* Preis-Überschrift (zwischen Blöcken) */
.priceHeadline {
    margin: 1.25vh 0 0.8vh 0;
    text-align: center;
}
.priceHeadline h2 {
    margin: 0;
    padding: 0;
    font-size: 1.7vh;
    font-family: inherit;
}
.priceHeadline h3 {
    margin: 0.15vh 0 0 0;
    padding: 0;
    font-size: 1.25vh;
    font-family: inherit;
}

/* Preisblock */
.priceBlock {
    margin-bottom: 1.25vh;
}
.priceBlock.inline {
    vertical-align: top;
    width: 48%;
    margin-right: 2%;
}
.priceBlock.inline:nth-child(2n) {
    margin-right: 0;
}

/* Inline-Gruppe (CSS Grid + Subgrid für gleiche Höhen) */
.inlineGroup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    column-gap: 2%;
}
.inlineGroup .priceBlock.inline {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    margin-right: 0;
}
.inlineGroup .priceBlock.inline .priceBlockHeader {
    grid-row: 1;
}
.inlineGroup .priceBlock.inline .priceList {
    grid-row: 2;
}

/* Preisblock-Header */
.priceBlockHeader {
    margin-bottom: 0.4vh;
}
.priceBlockHeader h4 {
    margin: 0;
    padding: 0;
    font-size: 1.6vh;
    font-family: inherit;
}
.priceBlockHeader h5 {
    margin: 0.15vh 0 0 0;
    padding: 0;
    font-size: 1.15vh;
    font-family: inherit;
    color: inherit;
}

/* Preisliste */
.priceList {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.2vh 1.4vw;
    align-content: start;
    margin: 0;
    padding: 0;
    font-size: 1.25vh;
    font-family: inherit;
    color: #f0ebe3;
}
.priceList dt,
.priceList dd {
    margin: 0;
    padding: 0.15vh 0;
}
.priceList dt {
    text-align: left;
}
.priceList dd {
    text-align: right;
    font-weight: bold;
}

/* Footer */
.displayFooter {
    margin-top: auto;
    padding-top: 0.8vh;
}

/* Leere Anzeige */
.display-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1.7vh;
    color: #f0ebe3;
    font-family: 'Permanent Marker', Arial, sans-serif;
}

/* Bildseite */
.displayPageContent {
    flex: 1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}