/* =====================================================
   DRB-BASE.CSS
   Ladereihenfolge: 1/3
   Zuständigkeit: Fonts, CSS-Variablen, Reset, Utilities

   Enthält NUR das Fundament — keine Layout-,
   keine Design-Entscheidungen.
   Basis: drb-basic-20240718-1.css (bereinigt)
   Stand: 2026-04
   ===================================================== */


/* =====================================================
   1. WEBFONTS — Work Sans
   Gewichte: 300 / 400 / 500 / 600 / 700 / 800
   (normal + italic, je 2 Dateien woff2 + woff)
   ===================================================== */

@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Work Sans Light'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-300.woff2') format('woff2'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-300.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 300;
  src: local('Work Sans Light Italic'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-300italic.woff2') format('woff2'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-300italic.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Work Sans Regular'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-regular.woff2') format('woff2'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-regular.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Work Sans Italic'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-italic.woff2') format('woff2'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-italic.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  src: local('Work Sans Medium'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-500.woff2') format('woff2'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-500.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 500;
  src: local('Work Sans Medium Italic'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-500italic.woff2') format('woff2'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-500italic.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Work Sans SemiBold'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-600.woff2') format('woff2'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-600.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 600;
  src: local('Work Sans SemiBold Italic'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-600italic.woff2') format('woff2'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-600italic.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Work Sans Bold'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-700.woff2') format('woff2'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-700.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Work Sans Bold Italic'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-700italic.woff2') format('woff2'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-700italic.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 800;
  src: local('Work Sans ExtraBold'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-800.woff2') format('woff2'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-800.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 800;
  src: local('Work Sans ExtraBold Italic'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-800italic.woff2') format('woff2'),
       url('/myfactory/CustomUpload/374O357O340O370O356O369O350O323O369O321O356O369O358O339O360O356O369O365O352O359O369O372O365O358O326O364O353O327O/work-sans-v19-latin-800italic.woff') format('woff');
}


/* =====================================================
   2. CSS-VARIABLEN
   Zentrale Designwerte für den gesamten Shop.
   Overrides (falls nötig) nur in drb-brand.css.
   ===================================================== */

:root {
  /* Hintergründe */
  --bgheader:       #ffffff;
  --bgmain:         #ffffff;
  --bgfooter:       #ffffff;

  /* Grundfarben */
  --black:          #000000;
  --white:          #ffffff;
  --txt:            #444444;
  --txtwhite:       #f8f8f8;
  --txtmidgrey:     #666666;
  --txtdarkgrey:    #353535;

  /* Markenfarben */
  --links:          #662483;
  --high:           #842471;
  --activ:          #248436;

  /* Icon-Füllfarben */
  --hfill:          #444444;
  --hfillhigh:      #662483;
  --hfillactiv:     #248436;

  /* Badges / Bubbles */
  --bubble:         #666666;
  --bubblehigh:     #662483;
  --bubbleactiv:    #248436;

  /* Navigation */
  --navhigh:        #662483;
  --navactiv:       #248436;

  /* Hintergrundboxen */
  --twobackbg:      #f4f4f4;
  --oneboxbg:       #e8deec;

  /* Buttons */
  --btn:            #662483;
  --btnover:        #842471;
  --btnactive:      #248436;
  --btnaddwk:       #662483;  /* Warenkorb-Button — Override in drb-brand.css */
  --trackbtnsubgrey:#e4e4e4;

  /* Sonderfarben */
  --rosa:           #ffd2d2;

  /* Rahmen */
  --bordernorm:     #eeeeee;
  --bordertop:      #e4e4e4;
  --borderdropbox:  #cfcfcf;
  --bordermid:      #858585;

  /* Status */
  --itemnewbg:      #ffa306;
  --error:          #d50000;
  --rgberror:       213,0,0;
  --ok:             #779f00;
  --rgbok:          119,159,0;

  /* Listen */
  --lstrowsbg:      #f1f1f1;

  /* Farbpalette (für Hero-Hintergründe etc.) */
  --rot:            #ed3237;
  --blau:           #005fe8;
  --gelb:           #ffff00;
  --gruen:          #33cc00;
  --orange:         #ff8c23;
  --violett:        #6e2682;

  /* Bestandsanzeige */
  --bestandgruen:   #669900;
  --bestandorange:  #f97700;
  --shipnofree:     #c8a500;
  --bggruen:        #779f00;

  /* Sperr-Hintergrund */
  --lockedbg:       #fff2f2;

  /* RGB-Werte (für rgba()-Verwendung) */
  --rgbblack:       0,0,0;
  --rgbwhite:       255,255,255;
  --rgbmain:        102,36,131;
  --rgbitem:        102,36,131;
  --rgbkat:         102,36,131;
  --rgbactiv:       36,132,54;
}


/* =====================================================
   3. RESET & BASIS
   ===================================================== */

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  scroll-behavior: smooth;
  font-size: 100%;
  height: 100%;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  line-height: 1.5;
  color: var(--txt);
  background: var(--white);
  height: 100%;
}

body, textarea, input, select, option, button {
  font-family: "Work Sans", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 300;
}

textarea, input, select, option {
  -webkit-border-radius: 0;
}

img, svg {
  border: none;
  vertical-align: middle;
}

a {
  color: var(--links);
  text-decoration: none;
  transition: all 0.3s ease;
}
a:hover { color: var(--high); text-decoration: underline; }
a:active { color: var(--activ); background: transparent; }
a.agrey, a.agrey:hover, a.agrey:active { color: var(--txt); text-decoration: none; }

a, a:focus,
input:focus, input:focus-within,
textarea:focus, textarea:focus-within,
select:focus-within, select:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0;
}

::selection {
  color: var(--txtwhite);
  background-color: var(--high);
}

::placeholder { color: var(--bordermid); }


/* =====================================================
   4. TYPOGRAFIE — Überschriften
   Gewichte werden in drb-brand.css überschrieben.
   ===================================================== */

h1 { font-size: 1.6875rem; color: #555555; }
h1, h2, h3, h4, h5 { font-weight: 300; }

b, strong, .txtbold { font-weight: 500; }

.ueberschriften { font-size: 1.5em; font-weight: 300; }


/* =====================================================
   5. TEXT-HILFSKLASSEN
   ===================================================== */

.txtl      { text-align: left; }
.txtc      { text-align: center; }
.txtr      { text-align: right; }
.txtnowrap { white-space: nowrap; }
.txtellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.txtgreen  { color: var(--ok); }
.txtred    { color: var(--error); }

/* Schriftgrößen
   BUGFIX: txt13 hatte denselben Wert wie txt12 — korrigiert auf 13px */
.txt12 { font-size: 12px; font-size: 0.75rem; }
.txt13 { font-size: 13px; font-size: 0.8125rem; } /* war fälschlich 12px */
.txt14 { font-size: 14px; font-size: 0.875rem; }

.hyphensnone { -ms-hyphens: none; -webkit-hyphens: none; hyphens: none; }


/* =====================================================
   6. LAYOUT-HILFSKLASSEN
   ===================================================== */

.posabs { position: absolute; }
.posrel { position: relative; }
.hfull  { height: 100%; }
.flussl { float: left; }
.fitimgcover { object-fit: cover; object-position: center center; }

/* Breiten */
.brc100, .br3-1, .br3-2, .brc50, .brl50, .brl33, .brl25 { width: 100%; }
.br15  { width: 15%; }
.br30  { width: 30%; }
.br70  { width: 70%; }
.brc25, .brc33, .brc40, .brc60, .brc75, .br50 { width: 50%; }
.brl50 { margin: 0 auto; }
.wmax360 { max-width: 360px; }

/* Display */
.nodisplay   { display: none; }
.indisplay   { display: inline; }
.inbldisplay { display: inline-block; }
header, main, footer, .bldisplay { display: block; }
.mhno, .flexdm, .flexds, .flexdxs { display: none; }
.mhyes    { display: inline; }
.mobilview { display: block; }
.boxsizecontent { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.boxradius { border-radius: 3px; }


/* =====================================================
   7. FLEXBOX-HILFSKLASSEN
   ===================================================== */

.flexdisplay {
  display: -webkit-flex;
  display: flex;
  display: -ms-flex;
  display: -ms-flexbox;
}
.flexjuspa   { -webkit-justify-content: space-between; justify-content: space-between; }
.flexjustr   { -webkit-justify-content: flex-start;    justify-content: flex-start; }
.flexjuend   { -webkit-justify-content: flex-end;      justify-content: flex-end; }
.flexjucent  { -webkit-justify-content: center;        justify-content: center; }
.flexalstr   { -webkit-align-items: stretch;           align-items: stretch; }
.flexalcent  { -webkit-align-items: center;            align-items: center; }
.flexwarp, .flexwrap { -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.flexcol     { flex-direction: column; }

/* Sortierreihenfolge */
.order1 { order: 1; }
.order2, .formorder form { order: 2; }
.order3 { order: 3; }
.order4 { order: 4; }


/* =====================================================
   8. ABSTANDS-HILFSKLASSEN (margin / padding)
   ===================================================== */

/* Margin oben */
.mtxsh  { margin-top: 0.25rem; }
.mtsh   { margin-top: 0.5rem; }
.mtmh   { margin-top: 1rem; }
.mtlh   { margin-top: 2rem; }
.mtxlh  { margin-top: 3rem; }
.mtxxlh { margin-top: 4rem; }

/* Margin unten */
.mbxsh  { margin-bottom: 0.25rem; }
.mbsh   { margin-bottom: 0.5rem; }
.mbmh   { margin-bottom: 1rem; }
.mblh   { margin-bottom: 2rem; }
.mbxlh  { margin-bottom: 3rem; }
.mbxxlh { margin-bottom: 4rem; }

/* Margin links / rechts */
.mlxs { margin-left: 0.25rem; }
.mls  { margin-left: 0.5rem; }
.mlm  { margin-left: 1rem; }
.mlxm { margin-left: 1.5rem; }
.mlss { margin-left: 0.625rem; }
.mrxs { margin-right: 0.25rem; }
.mrs  { margin-right: 0.5rem; }
.mrm  { margin-right: 1rem; }
.mrxm { margin-right: 1.5rem; }
.mrss { margin-right: 0.625rem; }

/* Padding oben */
.plxsh  { padding: 0.25rem 0 0 0; }
.plsh   { padding: 0.5rem 0 0 0; }
.plmh   { padding: 1rem 0 0 0; }
.pllh   { padding: 2rem 0 0 0; }
.plxlh  { padding: 3rem 0 0 0; }
.plxxlh { padding: 4rem 0 0 0; }

/* Padding oben + seitlich */
.pssnh, .plistnh { padding: 0 0.625rem; }
.pssxsh  { padding: 0.25rem 0.625rem 0; }
.psssh   { padding: 0.5rem  0.625rem 0; }
.pssmh   { padding: 1rem   0.625rem 0; }
.psslh, .psslhxl { padding: 2rem 0.625rem 0; }
.pssxlh  { padding: 3rem   0.625rem 0; }
.pssxxlh { padding: 4rem   0.625rem 0; }


/* =====================================================
   9. RAHMEN-HILFSKLASSEN
   ===================================================== */

.topline     { border-top:    1px solid var(--bordernorm); }
.botline     { border-bottom: 1px solid var(--bordernorm); }
.toplinegrey { border-top:    1px solid var(--borderdropbox); }
.botlinegrey { border-bottom: 1px solid var(--borderdropbox); }


/* =====================================================
   10. STATUS-MELDUNGEN
   ===================================================== */

.errorall { padding: 0.625rem; color: var(--txtwhite); background: var(--error); }
.okall    { padding: 0.625rem; color: var(--txtwhite); background: var(--ok); }


/* =====================================================
   11. BUTTONS
   ===================================================== */

.btnformfull,
.btnlink,
.btnsubform,
.btnsublink {
  display: block;
  padding: 0.375rem 1.25rem;
  line-height: 2rem;
  font-size: 0.875rem;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  border-radius: 3px;
  transition: all 0.2s ease;
}

.btnformfull,
.btnsubform {
  -webkit-appearance: none;
  -webkit-border-radius: 3px;
}

.btnformfull,
.btnlink {
  min-width: 8rem;
  background-color: var(--btn);
  color: var(--txtwhite);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btnsubform,
.btnsublink {
  background-color: var(--lstrowsbg);
  color: var(--txt);
  transition: all 0.25s ease;
  white-space: nowrap;
}

.trackbox .btnsublink { background-color: var(--trackbtnsubgrey); }

.btnformfull:hover, .btnlink:hover   { background-color: var(--btnover);   color: var(--txtwhite); text-decoration: none; }
.btnformfull:active, .btnlink:active { background-color: var(--btnactive); color: var(--txtwhite); text-decoration: none; }
.btnsubform:hover, .btnsublink:hover   { background-color: var(--btnover);   color: var(--txtwhite); text-decoration: none; }
.btnsubform:active, .btnsublink:active { background-color: var(--btnactive); color: var(--txtwhite); text-decoration: none; }

/* Button-Varianten */
.btnsubadr   { font-weight: normal; line-height: 1.6rem; margin: 0 0.625rem 0 0; min-width: 8.5rem; }
.btninfo     { width: 30%; min-width: 8.5rem; padding: 0.125rem 1.25rem; margin: 1.25rem auto 0; font-weight: 300; line-height: 1.6rem; font-size: 0.875rem; }
.btnw80      { width: 80%; min-width: auto; margin: 2rem 10% 0; }
.btnwm       { width: 100%; min-width: auto; max-width: 25rem; margin: 2rem auto 0; }
.btnwl       { width: 100%; max-width: 11rem; }

/* Button mit Pfeil-Icon */
.btnnxticon     { padding: 0.375rem 1.75rem 0.375rem 1.25rem; background-image: url('arrownext-wht.svg'); background-position: center right 8px; background-repeat: no-repeat; }
.btnnxticonblk  { background-image: url('arrownext.svg'); }
.btnnxticon:hover { padding: 0.375rem 1.75rem 0.375rem 1.25rem; background-image: url('arrownext-wht.svg'); background-position: center right 8px; background-repeat: no-repeat; }
.btnbackicon    { padding: 0.375rem 1.25rem 0.375rem 1.75rem; background-image: url('arrowprev.svg'); background-position: center left 8px; background-repeat: no-repeat; }
.btnbackicon:hover { padding: 0.375rem 1.25rem 0.375rem 1.75rem; background-image: url('arrowprev-wht.svg'); background-position: center left 8px; background-repeat: no-repeat; }
.btnbackiconblk      { padding: 0.375rem 1.25rem 0.375rem 1.75rem; background-image: url('arrowprev-wht.svg'); background-position: center left 8px; background-repeat: no-repeat; }
.btnbackiconblk:hover { padding: 0.375rem 1.25rem 0.375rem 1.75rem; background-image: url('arrowprev-wht.svg'); background-position: center left 8px; background-repeat: no-repeat; }

/* Firefox Button-Fix */
button::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
  cursor: pointer;
  border-width: 0;
}

/* Textlink-Button (kein Hintergrund) */
.btnformnormlink {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--black);
  font-size: 0.875rem;
  transition: all 0.3s ease;
}
.btnformnormlink:hover  { color: var(--high);  background: transparent; text-decoration: underline; }
.btnformnormlink:active { color: var(--activ); background: transparent; text-decoration: underline; }


/* =====================================================
   12. FORMULAR-ELEMENTE
   ===================================================== */

.ipfull, .txtfull, .selfull, .dvarianten select {
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 0.1875rem 0.5rem 0.625rem;
  color: var(--txtdarkgrey);
  background-color: var(--txtwhite);
  border: 1px solid var(--borderdropbox);
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

/* Nummern-Inputs ohne Spinner */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/* Select mit Pfeil */
.selfull, .dvarianten select {
  background-image: url('arrowdown.svg');
  background-position: center right 8px;
  background-repeat: no-repeat;
}

.txtfull { height: 10rem; }

/* Validierungs-States */
.ipfull:invalid, .txtfull:invalid, .selfull:invalid { border: 1px solid var(--error); box-shadow: 0 0 0 var(--white); }
.ipfull:valid,   .txtfull:valid,   .selfull:valid   { border: 1px solid var(--borderdropbox); }
.ipfull:focus,   .selfull:focus,   .txtfull:focus   { border: 1px solid var(--txt); background-color: var(--white); }

/* Filter-Eingabe */
.iplstfilter { width: calc(100% - 53px); }
.boxlstfilter::after {
  content: url('filter.svg');
  background-color: var(--btn);
  position: absolute;
  bottom: 0;
  left: calc(100% - 88px);
  width: auto;
  height: 1.25rem;
  padding: 9px 10px 6px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  cursor: pointer;
}
.boxlstfilter:hover::after { background-color: var(--btnover); }
.filterreset { width: 45px; cursor: pointer; }
.filterreset svg { width: auto; height: 1.25rem; }
.filterreset:hover svg path  { fill: var(--rot); }
.filterreset:active svg path { fill: var(--btnactive); }
#bestellsuchbox .filterreset { right: 0.5rem; }


/* =====================================================
   13. CUSTOM CHECKBOX / RADIO
   ===================================================== */

.dsbox { position: relative; }
.dsformbez {
  padding: 0 0 0 1.5rem;
  margin: -1.5rem 0 0 0;
  cursor: pointer;
  display: block;
}
.dsradio:checked,
.dsradio:not(:checked) {
  background: transparent;
  position: relative;
  opacity: 0;
  margin: 0;
  padding: 0;
  width: 1rem;
  height: 1rem;
}
.dsradio:checked + .dsformbez::before,
.dsradio:not(:checked) + .dsformbez::before { position: absolute; top: 0; left: 0; margin: auto; content: url('checkbox-unchecked.svg'); }
.dsradio:checked + .dsformbez::before { content: url('checkbox-checked-active.svg'); }
.dsradio:not(:checked):hover  + .dsformbez::before,
.dsradio:not(:checked):focus  + .dsformbez::before { content: url('checkbox-unchecked-active.svg'); }
.dsradio:not(:checked) + .dsreq::before { content: url('checkbox-unchecked-red.svg'); }


/* =====================================================
   14. LINKS IM NEUEN TAB
   ===================================================== */

a[target="_blank"], .newtab         { padding-right: 1.25rem; background-image: url('new-tab.svg');        background-position: center right; background-repeat: no-repeat; }
a[target="_blank"]:hover, .newtab:hover { padding-right: 1.25rem; background-image: url('new-tab-over.svg');   background-position: center right; background-repeat: no-repeat; }
a[target="_blank"]:active,.newtab:active { padding-right: 1.25rem; background-image: url('new-tab-active.svg'); background-position: center right; background-repeat: no-repeat; }
a.notab, a.notab:hover, a.notab:active,
.notab a, .notab a:hover, .notab a:active { padding-right: 0; background-image: none; }

.clearfix:after { content: "."; clear: both; display: block; visibility: hidden; height: 0; }