:root{

  --leftPanelWidth: 350px;
  --addSectionHeight: 50px;
  --dd-scroll-threshold: 200px;
  --dd-scroll-speed: 10px;

  /* Text */
  --fontFamilyText: "Inter";
  --fontFamilyHeadline: "Inter";

  /* Color */
  
  --textColor-1: rgb(220, 220, 220);
  --textColor-1-5: rgb(200, 200, 200);
  --textColor-2: rgb(180, 180, 180);
  --textColor-2-5: rgb(155, 155, 155);
  --textColor-3: rgb(130, 130, 130);
  --textColor-3-5: rgb(100, 100, 100);
  --textColor-4: rgb(65, 65, 65);
  --textColor-4-5: rgb(45, 45, 45);
  --textColor-5: rgb(35, 35, 35);

  --backgroundColor-0: rgb(245, 245, 245);
  --backgroundColor-1: rgb(220, 220, 220);
  --backgroundColor-2: rgb(180, 180, 180);
  --backgroundColor-3: rgb(130, 130, 130);
  --backgroundColor-4: rgb(65, 65, 65);
  --backgroundColor-5: rgb(35, 35, 35);



  /*
  //
  // Colors
  //
  */

  --white: #fff;
  --disabledColor: #c7c7c7;
  --warningColor: #d89611;
  --borderColor: rgb(80, 80, 80);

  /* Text */


  /* Input */


  /* Border */


  /* Colorful */
  --firstColorDark: #1b14a7;
  --firstColorLight: #736cff;
  --firstColor: #4f46e5;
  --firstColorPastel: #cecbff;

  --secondColorDark: #2196f3;
  --secondColorLight: #2196f3;
  --secondColor: #2196f3;
  --secondColorPastel: rgba(33,150,243,.25);

  --thridColorDark: #ff9800;
  --thridColorLight: #ff9800;
  --thridColor: #ff9800;
  --thridColorPastel: rgba(255,235,59,.35);

  --fourthColorDark: #0f1a31;
  --fourthColorDark: #131c2f;
  --fourthColorLight: #344362;
  --fourthColor: #1f2b43;
  --fourthColorPastel: #616875;

  --successColorDark: #175e18;
  --successColorLight: #53be55;
  --successColor: #2f8d30;
  --successColorPastel: #a0e5a1;

  --errorColorDark: #b32323;
  --errorColorLight: #ff8181;
  --errorColor: #ff5b5b;
  --errorColorPastel: #fdbfbf;
}



html {
  font-size: 14px;
}


body{
  margin: 0;
  padding:0; 
  background-color: #fff;
}

h1,h2,h3,h4,h5,h6{
  font-family: var(--fontFamilyText);
  color: var(--textColor-4);
}

legend{
  font-family: var(--fontFamilyText);
  color: var(--textColor-4);
}

p,
label,
div{
  font-family: var(--fontFamilyText);
  color: var(--textColor-4);
  font-size: 13px;
  line-height: 1.5;
}



/*
//
// Basics
//
*/

.display-none{
  display: none;
}



/*
//
// FLEX
//
*/

.flex{
  display: flex;
}

.flex-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-v-center{
  display: flex;
  align-items: center;
}

.flex-h-center{
  display: flex;
  justify-content: center;
}

.flex-align-center{
  display:flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column{
  display: flex;
  flex-direction: column;
}

.flex-row{
  display: flex;
  flex-direction: row;
}

.flex-row > * {
  flex: 1; /* Jedes Kindelement nimmt gleich viel Platz ein */
}

.gap-4{
  gap: 4px;
}

.gap-6{
  gap: 6px;
}


/*
//
// Text
//
*/


.basic-h3{
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--textColor-4);
  font-family: var(--fontFamilyHeadline);
}

.basic-h4{
  font-size: 1rem;
  font-weight: 400;
  color: var(--textColor-4);
  font-family: var(--fontFamilyHeadline);
}


/*
//
// Buttons
//
*/


.basic-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  background-color: #fafafa;
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border: 1px solid rgb(190, 196, 204);
  border-radius: 0.375rem;
  font-size: 13px;
  color: var(--textColor-4);
  cursor: pointer;
  transition: all ease 0.3s;
  text-decoration: none;
}

.basic-btn:hover{
  background-color: #fff;
}


.btn-link{
  text-decoration: underline;
  color: var(--firstColor);
  cursor: pointer;
}

a.basic-btn{
  text-decoration: none;
  font-family: var(--fontFamilyText);
  color: var(--textColor-3-5);
}

.basic-btn[disabled]{
  opacity: 45%;
  cursor:auto;
}

.active-btn {
  background-color: #e7f8e6;
  border-color: #44dd5b;
  color: #107920;
  background-color: var(--firstColorPastel);
  border-color: var(--firstColor);
  color: rgb(39, 31, 184);

}

.active-btn:hover{
  background-color: #bbb9f0;
  background-color: #dddcfd;
}


.delete-btn {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.icon-btn{
  display:flex;
  align-items: center;
  gap: 3px;
}

.border-btn{
  border: 1px solid var(--textColor-3);
  border-radius: 4px;
  padding: 3px 5px;
}

.icon-btn svg{
  height: 18px;
  width: 18px;
}


/*
//
// Left Panel
//
*/

.left-panel {
  width: var(--leftPanelWidth);
  position: fixed;
  top: 0;
  left: 0;
  left: auto;                    
  height: 100%;                     
  flex-direction: column;         
  align-items: stretch;
  border-bottom: none;
  z-index: 1010;               
  display: flex;
  background-color: var(--white);
  box-sizing: border-box;
  padding: 5px 0px 5px 5px;
  gap: 5px;
}


.left-panel .top-navigation{
  display:flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
}

.left-panel .top-navigation ul{
  display:flex;
  align-items: flex-start;
  margin: 0;
  padding: 0;

}

.left-panel .top-navigation ul li{
  padding: 11px;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-panel .top-navigation ul li svg{
  width: 20px;
  height: 20px;
  stroke: var(--backgroundColor-4);
}

.left-panel .top-navigation .cs-trigger{
  min-height: 0;
}

.current-page-container{
  cursor: pointer;
}

.back-to-page a{
  line-height: 0;
}

/*
//
// Left Panel Bottom Navigation
//
*/

.left-panel .bottom-navigation{
  display:flex;
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
}

.left-panel .bottom-navigation ul{
  display:flex;
  margin: 0;
  padding: 0;
}

.left-panel .bottom-navigation ul li{
  padding: 11px;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-panel .bottom-navigation ul li svg{
  width: 20px;
  height: 20px;
  stroke: var(--backgroundColor-4);
}

.left-panel .top-navigation .preview-webiste{
  display: flex; 
  align-items: center;
}

/*
//
// Right Panel
//
*/


.right-panel {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 5px;
  left: auto;                                       
  flex-direction: column;         
  align-items: stretch;
  border-bottom: none;
  z-index: 1010;               
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  box-sizing: border-box;

}

.right-panel ul{
  display:flex;
  align-items: flex-start;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  background-color: var(--white);
}

.right-panel ul li{
  padding: 11px;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right-panel ul li svg{
  width: 20px;
  height: 20px;
  stroke: var(--backgroundColor-4);
}

.right-panel ul li[show-hidden-elements] svg{
  stroke: var(--disabledColor);
}

.right-panel ul li[show-hidden-elements].activated svg{
  stroke: var(--backgroundColor-4);
}

/*
//
// Container
//
*/

.container {
  margin: 0;
  display: flex;
  /* display: none; */
}


.content{
  background-color: rgba(255, 0, 0, 0.263);
  margin-left: 300px; /* Platz für die fixe Sidebar */
  padding: 20px;
  flex: 1;
}


/*
//
// content-container
//
*/

.content-container{
  margin: 0;
  display: flex;
}










/*
//
// Layer Panel
//
*/

.layer-panel{
  margin-top: 5px;
}

.layer-panel-container {
  height: 350px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 2. Auf das sichtbare Element (.layer-panel) das Scroll-Verhalten legen */
.layer-panel {
  flex: 1;
  width: 100%;

  /* Immer sichtbare vertikale Scroll-Leiste, wenn gescrollt werden kann */
  overflow-y: scroll;   /* <-- hier: scroll statt auto */
  overflow-x: hidden;

  border-top: 1px solid var(--backgroundColor-1);
  border-bottom: 1px solid var(--backgroundColor-1);
}

/* 3. Entferne (oder reduziere) das overflow auf den IDs, damit es nicht doppelt greift */
#all-layer,
#section-layer {
  /* Keine eigene Scroll‐Logik hier, sondern die Scroll‐Leiste sitzt in .layer-panel */
  /* Falls du trotzdem auch hier overflow brauchst, setze es auf auto oder entferne es komplett. */
  overflow-y: visible;
  max-height: none; /* Die Höhe bestimmt allein .layer-panel-container → .layer-panel */
}

/*
//
// Layer Panel Navigation
//
*/



.layer-panel li {
  list-style: none;
  
}

.node-label {
  position: relative;
  cursor: pointer;
  font-family: var(--fontFamilyText);
  font-size: 12px;
  display:flex;
  align-items: center;
  border-left: 3px solid transparent;
  padding: 6px 10px;
}

.node-label:hover {
  background: var(--firstColorPastel) !important;
}

li.selected > .node-label {
  background: var(--firstColorPastel) !important;
  border-left: 3px solid var(--firstColor);
  font-weight: 600;
}


.node-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

.layer-panel ul:first-child {
  padding-left: 0px;
  margin: 0;
}

.layer-panel ul:nth-child(2) {
  padding-left: 5px;
  margin: 0;
}

/* Scrollbar-Basis: Breite einstellen */
.layer-panel {
  overflow-y: scroll; /* oder overflow: auto; */
}





.drag-overlay-top {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 15px;
  background-color: rgba(34, 86, 91, 0.5);
  pointer-events: none;
  z-index: 9999;
}

.drag-overlay-bottom {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  height: 15px;
  background-color: rgba(34, 86, 91, 0.5);
  pointer-events: none;
  z-index: 9999;
}

/* Wrapper für das Drag-Ghost */
.drag-ghost-container {
  position: absolute;
  top: -9999px;
  left: -9999px;
  pointer-events: none;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  padding: 4px;
  border-radius: 3px;
  font-family: sans-serif;
  width: max-content;
  z-index: 10000; /* ggf. höher setzen, falls nötig */
}

/* Stil für das übergeordnete Label im Ghost */
.drag-ghost-container .node-label-ghost-parent {
  display: block;
  margin: 0;
  padding: 2px 4px;
  font-size: 14px;
  font-weight: bold;
}

/* Stil für das erste Kind-Label im Ghost */
.drag-ghost-container .node-label-ghost-child {
  display: block;
  margin: 0;
  padding: 2px 4px;
  font-size: 13px;
  margin-left: 12px;
  opacity: 0.85;
}

/* Stil für das zweite Kind-Label im Ghost (wenn genau 2 Kinder existieren) */
.drag-ghost-container .node-label-ghost-child-second {
  display: block;
  margin: 0;
  padding: 2px 4px;
  font-size: 13px;
  margin-left: 12px;
  opacity: 0.7;
}

/* Stil für die Zusammenfassung „… + X more“ */
.drag-ghost-container .node-label-ghost-summary {
  display: block;
  margin: 0;
  padding: 2px 4px;
  font-size: 12px;
  margin-left: 12px;
  opacity: 0.7;
  font-style: italic;
}

/* Grundstil für die Gap-Linie (unsichtbar / transparent) */
.layer-panel-gap {
  border: none;
  height: 2px;
  margin: 3px 0;
  background-color: transparent;
}

/* Hover-/Active-Zustand, wenn eine Lücke beim Drag-Over sichtbar hervorgehoben werden soll */
.layer-panel-gap.drag-over-highlight {
  background-color: var(--firstColor);
}


/*
//
// Custom Scroll Bars Bottom
//
*/



.tablist.horizontal-tablist::-webkit-scrollbar {
  height: 0px;                  
  background: transparent;      
}

.tablist.horizontal-tablist::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1); 
  border-radius: 6px;
}

.tablist.horizontal-tablist::-webkit-scrollbar-thumb {
  background-color: rgba(60, 60, 60, 0.5);
  border-radius: 6px;
  border: 3px solid var(--firstColor);
}

.tablist.horizontal-tablist::-webkit-scrollbar-thumb:hover {
  background-color: rgba(60, 60, 60, 0.7);
}

/*
//
// Custom Scroll Bars Left
//
*/


.styling-panel::-webkit-scrollbar{
  width: 5px;              
  background: transparent;   
}


.styling-panel::-webkit-scrollbar-track{
  background: rgba(0, 0, 0, 0.1); 
  border-radius: 6px;
}


.styling-panel::-webkit-scrollbar-thumb{
  background-color: rgba(60, 60, 60, 0.5);
  border-radius: 6px;
  border: 3px solid rgba(0,0,0,0);
}


.styling-panel::-webkit-scrollbar-thumb:hover{
  background-color: rgba(60, 60, 60, 0.7);
}




/*
//
// Custom Scroll Bars Right
//
*/


.layer-panel::-webkit-scrollbar,
.history-list::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
#show-uploaded-images::-webkit-scrollbar,
.icon-grid::-webkit-scrollbar{
  width: 5px;              
  background: transparent;   
}


.layer-panel::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
#show-uploaded-images::-webkit-scrollbar-track,
.icon-grid::-webkit-scrollbar-track{
  background: rgba(0, 0, 0, 0.1); 
  border-radius: 6px;
}


.layer-panel::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
#show-uploaded-images::-webkit-scrollbar-thumb,
.icon-grid::-webkit-scrollbar-thumb{
  background-color: rgba(60, 60, 60, 0.5);
  border-radius: 6px;
  border: 3px solid rgba(0,0,0,0);
}


.layer-panel::-webkit-scrollbar-thumb:hover,
.history-list::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
#show-uploaded-images::-webkit-scrollbar-thumb:hover,
.icon-grid::-webkit-scrollbar-thumb:hover{
  background-color: rgba(60, 60, 60, 0.7);
}





/*
//
// Inputs
//
*/

input[type="color"]{
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgb(83, 83, 83);
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

input[type="color"]::-webkit-color-swatch {
  border: none;
}

.single-setting{
  display: flex;
  align-items: center;
  gap: 5px;
}

.single-setting input{
  background-color: transparent;
  /* max-width: 40px; */
}

.color-setting{
  width: 50%;
  display: flex;
  align-items: center;
  gap: 5px;
}

.color-setting input{
  background-color: transparent;
  max-width: 40px;
}


/*
//
// Tool Panel
//
*/

.tool-panel[hidden] { 
  display: none !important; /* IM Bild Bearbeitungsmodus */
}

.tool-panel{
  position: absolute;
  left: calc(50% + 0.5 * var(--leftPanelWidth));
  transform: translateX(-50%);
  border-radius: 5px;
  padding: 0 10px;
  background-color: var(--white);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e5e5e5;
  color: #b4b4b4;
  transition: all ease 0.5s;
  z-index: 1000;
  display: flex; 
  flex-direction: column;
  gap: 16px;
}

.tool-panel ul{
  margin: 0;
  padding: 0;
  display: flex; 
  flex-direction: row;
  gap: 4px;
}

.tool-panel ul .tool-panel-btn{
  display:flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 11px;
}

.tool-panel ul .tool-panel-btn[aria-disabled="true"] svg{
  stroke: var(--disabledColor);
}

.tool-panel ul .tool-panel-btn[aria-disabled="true"] .tool-svg-dark{
  stroke: var(--disabledColor);
}

.tool-panel ul .tool-panel-btn svg{
  width: 20px;
  height: 20px;
  stroke: var(--backgroundColor-4);
}


/*
//
// Website-Container
//
*/



#website-container{
  height: calc(100vh - var(--addSectionHeight));
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;  
  margin: 0 auto;
  position: relative;
  overflow: hidden auto;
}


/*
//
// Tablist
//
*/

.tablist{
  display:flex;
  flex-direction: column;
  margin-bottom: 0.5rem;
}

.tab-content{
  display:none;
}

.tab-content.active{
  display: block;
}

.horizontal-tablist{
  flex-direction: row;
}

.horizontal-tablist .tab-btn{
  padding: 5px 5px;
  border-radius: 0;
  color: var(--disabledColor);
  font-weight: 500;
  font-size: 13px;
  border: none;
  background-color: transparent;
  border-bottom: 3px solid var(--disabledColor);
}

.horizontal-tablist .tab-btn.active{
  color: var(--firstColor);
  border-bottom: 3px solid var(--firstColor);
  border-color: var(--firstColor);
}

.vertical-tablist{
  display: flex;
  flex-direction: column;
}

.vertical-tablist .tab-btn{
  display: flex;
  align-items: center;
  background-color: transparent;
  padding: 8px 10px 8px 0px;
  border:none;
  font-size: 13px;
  color: var(--textColor-4);
  cursor: pointer;
  transition: all ease 0.3s;
  text-decoration: none;
  gap: 10px;
}

.vertical-tablist .tab-btn svg{
  height: 20px;
  width: 20px;

}

.vertical-tablist .tab-btn.active{
  color: var(--firstColor);
}



/*
//
// Notifications
//
*/

#notification-container {
  position: fixed;
  Bottom: 1rem;
  right: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1020;
  transition: transform 0.5s ease, margin 0.5s ease;
}

.notification {
  color: #fff;
  padding: 15px 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin-top: 3px; 
  width: 300px; 
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease, margin 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;   
  overflow: hidden;   
}

.notification.show {
  opacity: 1;
  transform: translateY(0);
}

.notification.hide {
  opacity: 0;
  transform: translateY(-20px);
}

.notification.error {
  background-color: var(--errorColor); 
}

.notification.success {
  background-color: var(--firstColor);
}

.notification.warning {
  background-color: var(--warningColor);
}

.notification p {
  margin: 0;
  flex: 1;
  padding-right: 10px;
  color: #fff;
  font-family: var(--fontFamilyText);
}

.notification .notification-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                    /* „am Ende der Meldung“ */
  height: 6px;                  /* gewünschte Höhe */
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  transform-origin: right center;     /* rechtsbündig schrumpfen */
  width: 100%;
  /* Hintergrundfarbe wird per JS gesetzt (dunklere Variante) */
  animation: notifProgress 5000ms linear forwards; /* wird per JS neu gesetzt/gestartet */
}

/* Skaliert von 100% → 0% (rechts nach links, dank transform-origin) */
@keyframes notifProgress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}


/*
//
// Input with Options 
//
*/

.select-only-arrow {
  width: 20px;
  padding: 0;
  margin: 0;
  border: none;
  background-color: transparent;
  color: transparent;
  text-indent: 9999px;   /* verschiebt sichtbaren Text weit nach rechts */
  overflow: hidden;      /* verhindert Scroll-Leiste für den Text */
}

.select-only-arrow option {
  color: #f20000; /* oder was du möchtest */
}



.toggle-border-side.active{
  border: 2px solid green;
  background-color: #fff;
}

.toggle-border-side{
  background-color: #999;
}









.building-container {
  position: relative; /* wichtig fürs Overlay */
  margin-left: var(--leftPanelWidth);
  flex: 1;
  transition: margin-right 0.3s ease;
}

.building-container.full-width {
  margin-right: 0;
}

#selection-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
  z-index: 9; /* nach Bedarf hochsetzen */
}
/* Jedes Segment des 3x3-Rasters */
.grid-segment {
  position: absolute;
}

/* Das mittlere Segment (um das gewählte Element) */
.grid-segment.center {
  background: transparent;
}

/* Falls gewollt - Einstellungen für Farbabhebung des Mittleren Elements */
.grid-segment.center {
  position: relative;
}

.grid-segment.center::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  right: -2px;
  bottom: -2px;
  border: 2px solid rgb(144, 220, 252);
  pointer-events: none;
  z-index: 10;
}


[contenteditable="true"]:focus {
  outline: none;
  box-shadow: none;
}


.error-color{
  color: var(--errorColor) !important;
}



/*
//
// Color Pickr
//
*/


.navigation.is-sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
}


/*
//
// Checkbox Radio Group
//
*/





.radio-group,
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  justify-content: space-between;
}

.radio-group input[type="radio"],
.checkbox-group input[type="checkbox"]{
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-group label,
.checkbox-group label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  border-radius: 4px;
}

.radio-group-text label{
  padding: 0px 5px;
  font-size: 12px;
  height: 26px;
      text-align: center;
    line-height: 0;
    font-family: var(--fontFamilyText);
    font-size: 12px;
}

.radio-group svg,
.checkbox-group svg {
  width: 20px;
  height: 20px;
  padding: 3px;
  fill: transparent;
  stroke: var(--disabledColor);
}


/*
//
// Radio / Checkbox CHECKED
//
*/


.radio-group label:has(input[type="radio"]:checked),
.checkbox-group label:has(input[type="checkbox"]:checked) {
  color: var(--textColor-4);
  border-color: var(--textColor-4);
  stroke: var(--textColor-4);
  fill: transparent;
  
}

.radio-group label input[type="radio"]:checked + svg,
.checkbox-group input[type="checkbox"]:checked + svg {
  fill: transparent;
  stroke: var(--textColor-4);
}

.radio-group label input[type="radio"]:checked + svg .svg-main,
.checkbox-group input[type="checkbox"]:checked + svg .svg-main{
  stroke: var(--textColor-4);
  fill: transparent;
}

.radio-group label input[type="radio"]:checked + svg .svg-base,
.checkbox-group input[type="checkbox"]:checked + svg .svg-base{
  fill: var(--textColor-4);
}




.element-setting-select {
  position: relative;
}


/* Das echte Select */
.element-setting-select select,
.element-setting-select datalist {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  padding: 5px 5px 5px 5px; 
  font: inherit;
  color: var(--textColor, #000);
  background-color: var(--backgroundColor, #fff);
  border: 1px solid var(--disabledColor);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

/* Hover- und Fokus-Zustände */
.element-setting-select select:hover,
.element-setting-select select:focus {
  border-color: var(--borderColor);
  outline: none;
}

/* Pfeil bei Fokus einfärben */
.element-setting-select:focus-within::after {
  color: var(--borderColor);
}

/* Disabled-Zustand */
.element-setting-select select:disabled {
  background-color: var(--backgroundDisabled, #f5f5f5);
  color: var(--disabledColor);
  cursor: not-allowed;
}











/*
//
// Tab Settings
//
*/


.tab-settings{
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--textColor-3);
}

.tab-settings .tablist{
  display: flex; 
}

.tab-settings .tablist button{
  background-color: transparent;
  border: none;
}

.tab-settings .tablist button span{
  font-size: 0.85rem;
  color: var(--textColor-5);
}

.tab-settings .tablist button.active{
  background-color: var(--firstColor);
}

.tab-settings .tab-content{
  margin-top: 0.5rem;
}



/*
//
// Settings Tabellen
//
*/

.nav-settings-table,
.form-settings-table,
.list-settings-table{
  background-color: var(--white);
}

.nav-settings-table input,
.form-settings-table input,
.list-settings-table input{
  border: 1px solid var(--borderColor);
  padding: 2px;
}

.nav-settings-table select,
.form-settings-table select,
.input-settings-table select{
  border: 1px solid var(--borderColor);
  padding: 2px;
}

.nav-dropdown-child{
  background-color: var(--backgroundColor-0);
}


/*
//
// Settings Tabellen List
//
*/

.list-settings-table {
  width: 100%;
  border-collapse: separate;           
  border-spacing: 0;
  background-color: var(--white);
  box-shadow: var(--shadow-elevation-low);
  border-radius: var(--radius-md);
  overflow: hidden;     
}


.list-settings-table .list-input-text{
  width: 95%;   
}


/* Header */
.list-settings-table thead th {
  color: var(--textColor-4);
  font-weight: 600;
  text-align: left;
  padding: 5px;
  font-family: var(--fontFamilyText);

}

/* Zellen */
.list-settings-table tbody td {
  padding: 5px;

  vertical-align: middle;
}

.list-settings-table tbody tr {
  height: 40px;
}

/* Hover-Effekt */
.list-settings-table tbody tr:hover {
  background-color: var(--backgroundColor-0);
}

/* Inputs & Selects */
.list-settings-table input,
.list-settings-table select {
  padding: 4px;
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-sm);
  background-color: var(--white);
  font-size: var(--font-size-base);
}

/* Buttons (↑ ↓, Icon wählen, ✕) */
.list-settings-table button {
  height: 26px;
  width: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--borderColor);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--primaryColor);
  transition: background-color 0.2s;
}

.list-settings-table button[open-modal-alongside="add-icon-modal"]{
  padding: 0px 16px;
}

.list-settings-table .delete-list-item{
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--primaryColor);
  transition: background-color 0.2s;
}

.list-settings-table .delete-list-item svg{
  fill: var(--textColor-4);
  width: 18px;
  height: 18px;
}

.list-settings-table button:hover:not(:disabled) {
  background-color: var(--backgroundColor-0);
}

.list-settings-table button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Abstand zwischen den Action-Buttons */
.list-settings-table td:last-child button + button {
  margin-left: 8px;
}

.list-settings-table button,
.list-settings-table input,
.list-settings-table select {
  vertical-align: middle;
  border: 1px solid #ccc;
}


/*
//
// Disable
//
*/

.is-disabled{
  pointer-events: none;
  opacity: 0.4;
}





/*
//
// Disable
//
*/

.quick-menu {
  position: absolute;
  display: none;      
  padding: 8px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 1020;
  gap: 5px;
  flex-direction: column;
}


.quick-menu hr{
  width: 80%;
  border: 1px solid var(--backgroundColor-1);
}


.quick-menu-btn{
  display:flex;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  border: none;
  transition: all ease 0.1s;
  padding: 4px 8px;
  gap: 8px;
  border-radius: 2px;
  cursor: pointer;
}

.quick-menu-btn:hover{
  background-color: var(--backgroundColor-0);
}

.quick-menu-btn span{
  font-family: var(--fontFamilyText);
  color: var(--textColor-4);
  font-size: 13px;
}

.quick-menu-btn svg{
  width: 18px;
  height: 18px;
  /* fill: var(--textColor-2); */
}


/*
//
// Custom CSS
//
*/

#custom-css-toolbar {
  position: sticky;
  top: 0;
  background: var(--backgroundColor-0);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0rem 0.25rem 0.5rem;
  justify-content: space-between;
}

.custom-css-toolbar-left,
.custom-css-toolbar-right{
  display:flex;
  align-items: center;
  gap: 5px;
}

#custom-css-status {
  margin-left: 0.5rem;
  font-family: var(--fontFamilyText);
  color: var(--errorColor);
  font-weight: 700;
  font-size: 12px;
}

#custom-css-status.css-saved {
  color: var(--firstColor);
}

#custom-css-status.css-unsaved {
  color: var(--errorColor);
}

#custom-css-editor {
  width: 100%;
  height: 320px;
  max-height: 100%;
  border: 1px solid #ccc;
}

.monaco-editor .suggest-widget {
  z-index: 2000 !important;
}

.filter-selected-element-css{
  font-size: 12px;
  font-family: var(--fontFamilyText);
  font-weight: 400;
}


/*
//
// Drag Drop Animation
//
*/


.dd-hover {
  outline: 2px dashed var(--secondColor);
  background-color: var(--secondColorPastel);
}


/* Horizontale Linie in der Gap (UL) */
.dd-hover-gap {
  position: relative;
}

.dd-hover-gap::after {
  content: "";
  position: absolute;
  left: 8px;               /* etwas eingerückt */
  right: 8px;
  top: -1px;               /* sitzt genau zwischen zwei <li> */
  border-top: 2px dashed var(--firstColor);
  pointer-events: none;    /* ignoriert Maus */
}













#add-button-modal{
    max-height:400px;
overflow-x: hidden;
overflow-y: auto;
overflow-x: hidden;
}


#button-selection{
  margin:0;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 gleich breite Spalten */
  gap: 1rem; /* Abstand zwischen den Buttons */
  background-color: #fff;
}

#button-selection li{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}




.container-point-out{
  outline: 1px solid green;
}



#form-selection{
  margin:0;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 3 gleich breite Spalten */
  gap: 1rem; /* Abstand zwischen den Buttons */
  background-color: #fff;
}

#form-selection li{
  list-style:none;
}

/*
//
// Email Receiver From
//
*/

.form-receiver-email{
  display:flex; 
  flex-direction: column;
  font-family: var(--fontFamilyText);
  color: var(--textColor-4);
  font-size: 13px;
}

.form-receiver-email input{
  width: 100%;
  box-sizing:border-box;
  height: 32px;
  padding: 0 6px;
  font-family: var(--fontFamilyText);
  color: var(--textColor-4);
  font-size: 13px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-receiver-email input::placeholder{
  font-family: var(--fontFamilyText);
  color: var(--textColor-2);
  font-size: 13px;
}


/*
//
// Container Vertical
//
*/


.vertical-layout-checkbox{
  padding: 0px 5px;
  text-align: center;
  line-height: 0;
  font-family: var(--fontFamilyText);
  font-size: 12px;
  color: var(--disabledColor);
  height: 18px;
  border: 1px solid var(--disabledColor);
}



/*
//
// Loading Process (Spinner)
//
*/

#spinner-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10000;
}

#spinner-overlay.active {
  display: flex;
}

#spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #ccc;
  border-top: 6px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}



/*
//
// FONT BOX
//
*/




.font-config__legend {
  font-weight: bold;
  margin-bottom: 0.5em;
}

.font-config__top {
  display: flex;
  gap: 0.5em;
  margin-bottom: 0.75em;
  align-items: center;
}

.font-config__top > label {
  flex: 1;
}

.font-config__controls {
  display: flex;
  gap: 0.5em;
  align-items: center;
}

.font-config__bottom {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 0.75em;
  justify-content: space-between;
}


.font-config__controls > label {
  flex: 1;
}

/* Optional: Inputs und Selects füllen Breite des Labels */
.font-config__top select,
.font-config__controls input {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 2px;
  border: 1px solid rgb(209, 209, 209);
  border-radius: 2px;
  outline: none; 
}



/*
//
// Export Check
//
*/

/* 1) Einheitliches Spalten-Layout */
.export-check-results {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-family: sans-serif;
  table-layout: fixed;               /* Fixe Spaltenbreiten */
}

.export-check-results th,
.export-check-results td {
  padding: 0.5rem;
  border: 1px solid #eee;
  vertical-align: middle;
  overflow: hidden;                  /* Text kappen, wenn zu lang */
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Spalte 1: Status-Icon */
.export-check-results th:nth-child(1),
.export-check-results td:nth-child(1) {
  width: 3rem;                       /* genug Platz für Icon */
  text-align: center;
}

/* Spalte 2: Label / Text */
.export-check-results th:nth-child(2),
.export-check-results td:nth-child(2) {
  width: auto;                       /* nimmt verbleibenden Platz */
}

/* Spalte 3: Nav-Button */
.export-check-results th:nth-child(3),
.export-check-results td:nth-child(3) {
  width: 2.5rem;                     /* für das Navigations-Icon */
  text-align: center;
}

/* Header-Hintergrund & Trennlinien */
.export-check-results thead th {
  background: #f5f5f5;
  border-bottom: 2px solid #ccc;
}

/* Farben für Status */
.export-check-results .passed { color: var(--firstColor); }
.export-check-results .failed { color: var(--errorColor); }
.export-check-results .warning { color: var(--warningColor); }

/* Unterzeilen */
.export-check-results .subrow { 
  background: #fafafa;
  font-size: 0.9rem;
}

/* Entfernt Padding links vom Nav-Button, da Spaltenbreite fix ist */
.export-check-results td.nav-btn {
  padding-left: 0; 
}

/* 2) Style für die Preflight-Summary */
.preflight-summary {
  display: flex;
  align-items: center;
  gap: 1rem;                            
  border: 1px solid #cce4ff;        /* hellblaue Umrandung */
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.preflight-summary strong {
  margin-right: 1rem;
}

.preflight-summary span {
  display: inline-block;
}

.preflight-summary{
  font-family: var(--fontFamilyText);
}

.preflight-summary .passed { 
  color: var(--firstColor);
}
.preflight-summary .failed { 
  color: var(--errorColor);
}
.preflight-summary .warning{ 
  color: var(--warningColor);
}


/*
//
// History Panel
//
*/




.history-panel {
  font-family: var(--fontFamilyText);
  overflow: hidden;
  overflow-y: auto;
}

#history-panel li.active {
  background: var(--firstColorPastel);
  font-weight: 600;
  border-left: 3px solid var(--firstColor);
}

#history-panel li.redo  {
  color: #999;
}

#history-list{
  margin: 0;
  padding: 0rem;
  list-style: none;
  overflow-y: auto;
  height: 100%; 
  max-height: 400px;
}

#history-list li{
  cursor: pointer;
  list-style: none;
  padding: 6px 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-left: 3px solid transparent;
  font-size: 12px;
  margin: 2px 0px;
}


/*
//
// Preview Toolbar
//
*/


#preview-esc-hint{
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  padding: 1rem;
  background: var(--white);
  color: rgb(255, 255, 255);
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  z-index: 9999;
  text-align: center;
  display:none;
}

#preview-esc-hint input[type="radio"]:checked + svg{
  stroke:#1b14a7;
}

#preview-esc-hint input[type="radio"] + svg{
  stroke: var(--disabledColor);
}


/*
//
// Color Pickr
//
*/


.pickr-trigger{
  height: 20px;
  width: 20px;
    border: 1px solid #c1c1c1;
  padding: 0;             /* (falls dein Layout anderes benötigt) */
  box-sizing: border-box; /* sichert exakte Kanten */
}


.pcr-color-opacity .pcr-picker{
  border: 1px solid #a0a0a0 !important;
}

.pcr-app[data-theme=classic]{
  scale: 1.2;
}

.pcr-color-preview{
  border: 1px solid rgb(227, 227, 227);
}

.pcr-interaction input{
  font-size: 0.65rem !important;
}

.pcr-swatches-panel {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 4px;
  margin-bottom: 8px;
}


.pcr-swatch {
  width: 24px;
  height: 24px;
  background-color: #ffffff; 
  border: 1px solid #ccc;
  cursor: pointer;
  box-sizing: border-box;
}

.pcr-button-pipette {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  line-height: 1;
  padding: 4px;
  margin-left: 4px;
}

.pcr-button-pipette:hover {
  background-color: rgba(0,0,0,0.1);
}


/*
//
// Element Device Visibility
//
*/


.debug-outline { outline: 2px dashed red !important; }

#show-different-devices.desktop-preview [data-hide-desktop="true"],
#show-different-devices.tablet-preview  [data-hide-tablet="true"],
#show-different-devices.mobile-preview  [data-hide-mobile="true"] {
  display: none !important;
}



/*
//
// Image Settings Element
//
*/

button[open-modal="add-icon-modal"],
button[open-modal="list-settings-modal"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #fff;
  border: 1px solid #d1d5db;    
  border-radius: 0.375rem;        
  font-size: 0.875rem;              
  color: #374151;                
  cursor: pointer;
  transition: background-color 0.1s;
}


button[open-modal="select-uploaded-image-modal"],
button[remove-selected-image-button],
button[position-image-button]{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 8px 0px;
  border: 1px solid #d1d5db;    
  border-radius: 0.375rem;        
  font-size: 0.875rem;              
  color: #374151;                
  cursor: pointer;
  transition: background-color 0.1s;
}

button[open-modal="select-uploaded-image-modal"]:hover,
button[position-image-button]:hover {
  background-color: #f9fafb;       
}

button[remove-selected-image-button] {
  background-color: #fef2f2;        
  border-color: #fecaca;           
  color: #b91c1c;                
}
button[position-image-button]:disabled,
button[remove-selected-image-button]:disabled {
  opacity: 0.4;
  pointer-events: none;             
}

button[remove-selected-image-button]:hover {
  background-color: #fee2e2; 
}

.image-alt-description {
  width: 100%;
  padding: 6px;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  color: #374151;
  resize: vertical;
  height: 64px;
  box-sizing: border-box;  
}


.image-settings { 

  gap: 6px;
}


.image-alt-description::placeholder {
  font-family: var(--fontFamilyText);
  font-size: 12px;
}


[image-scale-info] {
  margin-left: 6px;
  grid-column: 1 / -1;          
  font-size: 12px;
  color: #6b7280;       
  font-family: var(--fontFamilyText);
}

[image-scale-info] span {
  font-weight: 400;
  font-family: var(--fontFamilyText);
  color: var(--warningColor);
}


button[position-image-button] svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}



.image-thumb{
  width:64px;
  height:64px;
  border:1px solid #ddd;
  border-radius:6px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f8f8f8;
  cursor:pointer
}




/* ───── Overlay & Handles ───── */
.img-overlay {
  position: absolute;
  inset: 0;
  z-index: 10000;          /* 804 nicht ändern */
  pointer-events: none;
}
.img-handle {
  width: 10px;
  height: 10px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 2px;
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
/* Handle-Cursor */
.img-handle.tl, .img-handle.br { cursor: nwse-resize; }
.img-handle.tr, .img-handle.bl { cursor: nesw-resize; }
.img-handle.t,  .img-handle.b  { cursor: ns-resize;  }
.img-handle.l,  .img-handle.r  { cursor: ew-resize;  }

/* ───── (Legacy) Masken-Layer ───── */
.img-mask {
  pointer-events: none;
  background: transparent;
  z-index: 1100;          /* nicht ändern */
}

/* ───── Ziel-Container + Cursor-Hilfen ───── */
.image-positioning-target { z-index: 807; position: relative; }  /* nicht ändern */
.image-positioning-cursor-grab { cursor: grab; }
.image-positioning-cursor-move { cursor: move; }



.img-overflow-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 0; height: 0;
  background: rgba(255,255,255,0.5);
  pointer-events: none;
  z-index: 1090;
}


/* Positionierungsziel – bleibt wie in deiner Datei */
.image-positioning-target { z-index: 1100; position: relative; }


.img-mask { z-index: 1100; pointer-events: none; background: transparent; }
.img-overlay { z-index: 10000; pointer-events: none; }
.img-handle { pointer-events: auto; }


/* ---------- Snap-Guides ---------- */
.snap-guide {
  position: absolute;
  background: #3b82f6; /* blau */
  opacity: 0;          /* per JS auf 1 setzen beim Snap */
  transition: opacity 80ms ease-out;
  pointer-events: none;
  z-index: 10001;      /* über Handles */
}

/* etwas sichtbarer als 1px auf HiDPI, aber optisch immer 1px */
.snap-guide::before {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: 0 0 0 1px #3b82f6;
}

/* ---------- Hotkey-Hints ---------- */
.image-hotkey-hints {
  font-size: 11px;
  line-height: 1.25;
  color: #6b7280;
  background: #ffffffd9;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
}
.image-hotkey-hints > strong {
  display: block;
  margin-bottom: 2px;
  color: #374151;
}
.image-hotkey-hints ul {
  margin: 0; padding-left: 16px;
}
.image-hotkey-hints li { margin: 0; }

/* ---------- Handles: größer + bessere Trefferzone ---------- */
.img-handle {
  width: 14px;
  height: 14px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 2px;
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.img-handle::after {
  content: '';
  position: absolute;
  left: -6px; top: -6px; right: -6px; bottom: -6px; /* vergrößerte Hit-Area */
}


/*
//
// Image Toolbar
//
*/


.image-position-toolbar {
  position: fixed;
  transition: top .12s ease-out, left .12s ease-out, bottom .12s ease-out;
  display:flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1110;
  gap: 6px;
  pointer-events: auto;
  align-items: center;
}


.image-position-toolbar.is-sticky::after {
  content: "sticky";
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 10px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  color: #6b7280;
  background: #ffffffd9;
}


.image-position-toolbar .image-scale-info {
  font-size: 12px;
  line-height: 1.2;
  background: transparent;
  padding: 0;
  color: var(--textColor-4);
}

.image-position-toolbar [data-device][aria-pressed="true"] {
  outline: 2px solid var(--firstColor);
  outline-offset: 1px;
}

.image-position-actions {
  display: flex;
  gap: 6px;
}

.image-position-actions .cs-trigger{
  width: 150px;
}






























/*
//
// Styling Panel
//
*/

.styling-panel{
  max-height: 100%;
  overflow-y: scroll;
  flex: 1 1 auto;
  overflow: auto;
}

.style-description{
  font-size: 12px;
  color: var(--textColor-2-5);
  font-family: var(--fontFamilyText);
}

.current-value{
  font-size: 12px;
  color: var(--textColor-3-5);
  font-family: var(--fontFamilyText);
}

.show-settings-for{
  padding-right: 5px;
  max-height: 100%;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  padding: 5px;
}

.show-settings-for hr{
  width: 100%;
  border: none;
  border-top: 1px solid rgb(227, 227, 227);
  margin-top: 6px;
  margin-bottom: 6px;
}

.style-collection{
  padding: 5px;
}

.style-collection[offerStyle="style-distances"]{
  display: flex;
  gap: 30px;
}

/*
//
// Receive Style List
//
*/


.receive-style-list {
  display: grid;
  grid-auto-rows: min-content;
  margin-top: 6px;
}

.receive-style-instance {
  padding: 5px;
}

.receive-style-remove {
  font: inherit;
  font-size: 12px;
  color: #444;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  display: flex; 
  align-items: center;
  justify-content: center;
}
.receive-style-remove:hover {
  background: rgba(0,0,0,0.05);
  color: #111;
}



/*
//
// Receive Style Offering Stlye 
//
*/

ul[receive-style] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0;
  margin: 20px 0 10px 0px;
  list-style: none;
}

ul[receive-style] > li {
  font: inherit;
  line-height: 1;
  padding: 6px 10px;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease, color 120ms ease;
  background: var(--fourthColorLight);
  color: #fff;
  font-size: 12px;
}

ul[receive-style] > li:hover {
  border-color: rgba(0,0,0,0.22);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

ul[receive-style] > li:active {
  transform: translateY(0.5px);
}

ul[receive-style] > li.is-disabled,
ul[receive-style] > li[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
}


/*
//
// Box Model Header
//
*/

.box-model-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}

.box-model-header .title{
  font-size: 13px;
  font-weight:500;
  color: var(--fourthColor);
}

/*
//
// Box Model Button
//
*/

.link-all-inputs{
  background-color: transparent;
  border: none;
  display: flex; 
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0px 6px;

  border: 1px solid transparent;
}

.link-all-inputs span{
  color: var(--disabledColor);
  font-size: 10.5px;
}

.link-all-inputs svg{
  fill: var(--disabledColor);
  height: 20px;
  width: 20px;
}




.link-all-inputs.activated svg{
  fill: var(--textColor-4);
}

.link-all-inputs.activated span{
  color: var(--textColor-4);
}

/*
//
// Box Model Grid
//
*/

.box-model-control{
  width: 100%;
}

.box-model-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}

.control{
  display:flex;
  justify-content:space-between;
  align-items:center;
}


div[offerStyle="style-border"] .control{
  justify-content: space-between;
  gap: 10px; 
}

div[offerStyle="style-border"] .control .style-description{
  width: 55px;
}

.box-model-input{
  width:60px;
  border:1px solid #bdbdbd;
  border-radius:4px;
  padding:2px 4px;
  text-align:right;
  font-size:13px;
  background: transparent;
}

.box-model-input-range{
  width:80px;
  border:1px solid #ccc;
  border-radius:4px;
  text-align:right;
  font-size:13px;
}

.control input[type="number"]:focus{
  outline:2px solid #1976d2;
  border-color:#1976d2;
}

.box-model-grid select{
  background: transparent;
}


/*
//
// Builder Icon Button
//
*/

.builder-icon-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 11px;
  border: none;
  background-color: transparent;
}

.builder-icon-btn svg{
  width: 20px;
  height: 20px;
  stroke: var(--disabledColor);
}

.builder-icon-btn.activated svg{
  stroke: var(--textColor-4);
}


/*
//
// Text Radio Checkbox Button
//
*/


.text-radio-btn,
.text-checkbox-btn{
  width: 100%;
  padding: 0px 5px;
  text-align: center;
  line-height: 0;
  font-family: var(--fontFamilyText);
  font-size: 11px;
  color: var(--disabledColor);
  height: 18px;
  border: 1px solid var(--disabledColor);
}



/*
//
// Debug Margin Padding
//
*/


.margin-seg-top,
.margin-seg-right,
.margin-seg-bottom,
.margin-seg-left,
.padding-seg-top,
.padding-seg-right,
.padding-seg-bottom,
.padding-seg-left {
  position: absolute;
  pointer-events: none;
  box-sizing: content-box;
  z-index: 9999;
}


.toggle-count {
  position: absolute;
  top: -2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  background: var(--firstColor);
  color: rgb(255, 255, 255);
  font-size: 11px;
  border-radius: 8px;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  display: block;
}

/*
//
// Add Page
//
*/

/*

.add-page-container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fontFamilyText);
  font-size: 12px;
  color: var(--textColor-4);
  padding: 5px;
  background-color: var(--white);
  border-bottom: 1px solid rgb(227, 227, 227);
  margin-bottom: 5px;
}

.add-page-container label {
  margin-right: 2px;
  color: var(--secondColor);
  font-weight: 700;
}

.add-page-container select {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: var(--white);
  font-size: 12px;
  color: #333;
  appearance: none;
  width: 100%;
}

.add-page-container svg {
  pointer-events: none;
}


.device-visibility-controls{
  display:flex;
  align-items: center;
}

.device-visibility-controls span{
  padding-left: 3px;
  color: var(--textColor-4);
  font-size: 12px;
  font-weight: 400;
  font-family: var(--fontFamilyText);
}




/*
//
// Image Settings Element
//
*/

button[open-modal="add-icon-modal"],
button[open-modal="list-settings-modal"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: #fff;
  border: 1px solid #d1d5db;    
  border-radius: 0.375rem;        
  font-size: 0.875rem;              
  color: #374151;                
  cursor: pointer;
  transition: background-color 0.1s;
}


button[open-modal="select-uploaded-image-modal"],
button[remove-selected-image-button],
button[position-image-button]{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 8px 0px;
  border: 1px solid #d1d5db;    
  border-radius: 0.375rem;        
  font-size: 0.875rem;              
  color: #374151;                
  cursor: pointer;
  transition: background-color 0.1s;
}

button[open-modal="select-uploaded-image-modal"]:hover,
button[position-image-button]:hover {
  background-color: #f9fafb;       
}

button[remove-selected-image-button] {
  background-color: #fef2f2;        
  border-color: #fecaca;           
  color: #b91c1c;                
}
button[position-image-button]:disabled,
button[remove-selected-image-button]:disabled {
  opacity: 0.4;
  pointer-events: none;             
}

button[remove-selected-image-button]:hover {
  background-color: #fee2e2; 
}

.image-alt-description {
  width: 100%;
  padding: 6px;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  color: #374151;
  resize: vertical;
  height: 64px;
  box-sizing: border-box;  
}


.image-settings { 

  gap: 6px;
}


.image-alt-description::placeholder {
  font-family: var(--fontFamilyText);
  font-size: 12px;
}


[image-scale-info] {
  margin-left: 6px;
  grid-column: 1 / -1;          
  font-size: 12px;
  color: #6b7280;       
  font-family: var(--fontFamilyText);
}

[image-scale-info] span {
  font-weight: 400;
  font-family: var(--fontFamilyText);
  color: var(--warningColor);
}


button[position-image-button] svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}


.image-thumb{
  width:64px;
  height:64px;
  border:1px solid #ddd;
  border-radius:6px;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f8f8f8;
  cursor:pointer
}


/*
//
// Flex Layout Controls
// 
*/


.title{
  font-weight: 500;
  font-family: var(--fontFamilyText);
  color: var(--textColor-4);
  font-size: 13px;
}


.flex-layout-controls-content{
  display: flex;
  justify-content: space-between;
}

/*
//
// Flex Layout Controls LEFT & RIGHT
// 
*/

.flex-layout-controls-left,
.flex-layout-controls-right{
  display: flex;
  flex-direction: column;
  font-weight: 500;
  font-family: var(--fontFamilyText);
  font-size: 11px;
  gap: 0.5rem;
}


.flex-layout-controls-left label{
  width: 100%;
  padding: 0px 5px;
  text-align: center;
  line-height: 0;
  font-family: var(--fontFamilyText);
  font-size: 12px;
  color: var(--disabledColor);
  height: 18px;
  border: 1px solid var(--disabledColor);
}

.flex-layout-controls-right label{
  display: flex;
  width: calc( 100% - 7px);
  padding: 0px 5px;
  text-align: center;
  line-height: 0;
  font-family: var(--fontFamilyText);
  font-size: 12px;
  color: var(--disabledColor);
  height: 18px;
  border: 1px solid var(--disabledColor);
}

.flex-layout-controls-right label[inputFor="gap"]{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border: none;
}


.flex-layout-controls .radio-group label:has(input[type="radio"]:checked) {
  border-color: var(--firstColor);
  color: var(--firstColor);
}

.flex-layout-controls .radio-group input[type="radio"]:checked + svg {
  fill: var(--firstColor);
}


.flex-layout-controls-right .radio-group{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/*
//
// Flex Layout Controls MID
// 
*/

.flex-layout-controls-mid label{
  border-color: transparent;
}


.flex-layout-controls-mid{
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: -1px;
}

.flex-layout-controls-mid .radio-group{
  gap: 0.5rem;
}

.flex-layout-controls-mid .radio-group svg{
  padding: 0
}

/*
//
// Style Height Checkbox
// 
*/


.height-checkbox{
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  border: 1px solid var(--disabledColor);
  border-radius: 4px;
  display: flex;
  padding: 0px 5px;
  text-align: center;
  line-height: 0;
  font-family: var(--fontFamilyText);
  font-size: 12px;
  color: var(--textColor-4);
  height: 26px;
}


.height-checkbox:has(input[type="checkbox"]:checked) {
  border-color: var(--firstColor);
  color: var(--firstColor);
}

.height-checkbox[type="checkbox"]:checked + svg {
  fill: var(--firstColor);
}

/*
//
// Tooltip Button
//
*/

button[open-modal="tooltip-modal"]{
  background-color: transparent;
  border:none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:0;
}

button[open-modal="tooltip-modal"] svg{
  width: 14px;
  height: 14px;
  stroke: var(--textColor-3);
  transition: all ease 0.3s;
  padding: 4px;
}

button[open-modal="tooltip-modal"] svg:hover{
  stroke: var(--firstColor);
}

button[open-modal="tooltip-modal"].activated svg{
  stroke: var(--firstColor);
}




/*
//
// Style Settings Box
//
*/

.style-settings-box-container{
  margin-top: 4px;
  display:flex;
  gap: 4px;
  flex-direction: column;

}

.style-settings-box{
  border: 1px solid rgb(227, 227, 227);
  border-radius:8px;
  padding:12px 14px;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
  width: auto;         
  font-family: var(--fontFamilyText);
  font-size:12px;
  background-color: var(--white);
  background-color: #fcfbfa;
}

.style-settings-box hr{
  border: none;
  border-top: 1px solid rgb(227, 227, 227);
  margin-top: 8px;
  margin-bottom: 8px;
}

.one-item-box{
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 12px;
}

.two-item-box{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.two-item-box-image-thumb{
  display: grid;
  grid-template-columns: 64px 1fr; 
  gap: 12px;
}

.three-item-box{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}


.style-container{
  display: flex;
  gap: 8px;
}

.single-item-flex{
  display: flex;
  gap: 8px;
  align-items: center;
}

.full-size-btn{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  padding: 8px 0px;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  transition: background-color 0.1s;
}


/*
//
// Tooltip
//
*/

.tooltip-body p:last-child{
  margin-bottom: 0;
}


.tooltip-short-description{
  border-left: 5px solid var(--firstColor);
  padding: 4px 4px 4px 9px;
  background-color: var(--firstColorPastel);
  margin-top: 0;
}

.how-it-works{
  font-family: var(--fontFamilyText);
  color: var(--textColor-4);
  font-weight: 800;
  font-size: 18px;
}



/*
//
// Project Overview Gallery
//
*/


.projects-header {
  padding: 24px 28px 8px;
}

.projects-header h1 {
  margin: 0;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 650;
  color: #0f1419;
}

.projects-main {
  padding: 10px 20px 40px;
}

.project-navigation{
  display: flex; 
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.project-empty-hint {
  color: #6a7785;
  padding: 12px 6px 24px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
}

.project-tile {
  background: #ffffff;
  border: 1px solid #e5e8ee;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(31,35,40,0.04);
}

.project-preview {
  position: relative;
  background: #f0f2f7;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.project-preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.project-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f0f2f7;
}

.project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid #e5e8ee;
}

.project-title {
  margin: 0;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
}

.project-status-badge{
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 999px;
  color: rgb(255, 255, 255);
  font-family: var(--fontFamilyText);
}

.project-status-badge[data-state="offline"]{
  background-color: var(--disabledColor);
}

.project-status-badge[data-state="online"]{
  background-color: var(--firstColor);
}

.project-live-open{
  position:absolute;top:6px;left:6px;
  font-size:12px;padding:2px 6px;border-radius:999px;
  background:rgba(0,0,0,.7);color:#fff;text-decoration:none;
}

.project-meta{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.project-meta .project-title{ margin-right:auto; }
.project-meta .project-actions{ display:flex; gap:.5rem; margin-left:auto; }


/*
//
// Custom Style Select
//
*/


.cs-style-native {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.cs-style {
  display: inline-block;
  width: 100%;
  font: inherit;
  font-size: 11px; 
}


.cs-style-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .25rem;
  min-width: 100px;
  width: 100%;
  min-height: 20px;              
  padding: 3px 6px;            
  border: 1px solid #d1d5db;
  border-radius: 4px;             
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.cs-style-trigger:hover {
  border-color: var(--firstColor);
}

.cs-style.is-style-open .cs-style-trigger {
  border-color: var(--firstColor);
  outline: 1px solid var(--firstColor);
}

.cs-style-trigger:focus-visible {
  outline-color: var(--firstColor);
}

.cs-style-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-family: var(--fontFamilyText);
  color: var(--textColor-4);
}

.cs-style-caret {
  flex: 0 0 auto;
  width: .9em;
  height: .9em;
  position: relative;
}
.cs-style-caret::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: .25em;
  height: .25em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-10%);
  opacity: .7;
}
.cs-style.is-style-open .cs-style-caret::before {
  transform: rotate(-135deg) translateY(10%);
}

.cs-style-list {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 220px;              
  overflow: auto;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(16,24,40,.12), 0 2px 6px rgba(16,24,40,.08);
  padding: 0;
  display: none;
}

.cs-style.is-style-open > .cs-style-list { 
  display: block !important; /* falls du irgendwo ein späteres display:none hast */
}

.cs-style.is-style-open .cs-style-list {
  display: block;
}

.cs-style-option {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  padding: 6px 8px;               
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  font-size: 12px;
  font-family: var(--fontFamilyText);
  color: var(--textColor-4);
}

.cs-style-check {
  margin-left: auto;
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.cs-style-check svg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 80%;
}
.cs-style-option[aria-selected="true"] .cs-style-check {
  opacity: .9;
}

.cs-style-option[aria-disabled="true"] {
  color: #9aa4b2;
  cursor: not-allowed;
}

.cs-style-option:hover:not([aria-disabled="true"]),
.cs-style-option.is-style-active:not([aria-disabled="true"]) {
  background: #f3f4f6;
}

.cs-style.is-style-disabled .cs-style-trigger {
  background: #f8fafc;
  color: #9aa4b2;
  cursor: not-allowed;
}

/*
//
// Custom Select
//
*/



.cs-native {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Wrapper */
.cs {
  display: inline-block;
  width: 100%;            /* passt sich Container an */
  font: inherit;
}

/* Trigger (geschlossener Zustand) */
.cs-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  width: 100%;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;         /* neutral-300 */
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  text-align: left;
}

.cs-trigger:hover {
  border-color: var(--firstColor);           /* hover subtle */
}

.cs.is-open .cs-trigger {
  border-color: var(--firstColor); 
  outline: 1px solid var(--firstColor); 
}

.cs-trigger:focus-visible {
  outline-color: var(--firstColor);
}

.cs-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  font-family: var(--fontFamilyText);
  color: var(--textColor-4);
}

.cs-caret {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  position: relative;
}
.cs-caret::before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  margin: auto;
  width: .3em;
  height: .3em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-10%);
  opacity: .7;
}
.cs.is-open .cs-caret::before {
  transform: rotate(-135deg) translateY(10%);
}

.cs-list {
  position: absolute;
  top: calc(100% - 10px);
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 320px;
  overflow: auto;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(16,24,40,.12), 0 2px 8px rgba(16,24,40,.08);
  padding: 0;
  display: none;
}

.cs.is-open .cs-list { display: block; }

.cs-option {
  display: flex;        
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 10px 12px;
  line-height: 1.25;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  font-family: var(--fontFamilyText);
  color: var(--textColor-4);
}

.cs-check {
  margin-left: auto;
  width: var(--cs-icon-size, 18px);
  height: var(--cs-icon-size, 18px);
  opacity: 0;
  transition: opacity 120ms ease;
}

.cs-check svg {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 80%;
}

.cs-option[aria-selected="true"] .cs-check {
  opacity: .9;
}

.cs-option[aria-disabled="true"] {
  color: #9aa4b2;
  cursor: not-allowed;
}

.cs-option:hover:not([aria-disabled="true"]),
.cs-option.is-active:not([aria-disabled="true"]) {
  background: #f3f4f6;              
}

.cs.is-disabled .cs-trigger {
  background: #f8fafc;
  color: #9aa4b2;
  cursor: not-allowed;
}


/*
//
// Text Input
//
*/


.text-input{
  box-sizing: border-box;
  font-family: var(--fontFamilyText);
  border: 1px solid #d1d5db;
  color: var(--textColor-4);
  padding: 9px 8px;
  border-radius: 4px;
  font-size: 13px;
  background-color: transparent;
}

.text-style-input{
  box-sizing: border-box;
  font-family: var(--fontFamilyText);
  border: 1px solid #d1d5db;
  color: var(--textColor-4);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 11px;
  background-color: transparent;
  height: 20px;
}



.width-100-procent{
  width: 100%;
}

.width-50{
  max-width: 50px;
}

.width-400{
  max-width: 400px;
}

.text-input:hover{
  border: 1px solid var(--firstColor);
}

.text-input::placeholder{
  font-family: var(--fontFamilyText);
  color: var(--textColor-3);
  font-size: 13px;
}

.text-input:focus{
  outline-color: var(--firstColor);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

/*
//
// Range Input
//
*/


.range-input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(var(--firstColor) 0 0) 0/var(--f, 0%) 100% no-repeat,
    #e5e7eb;
  outline: none;
}

.range-input::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border-radius: 999px;
}

.range-input::-moz-range-track {
  height: 4px;
  background: #e5e7eb;
  border-radius: 999px;
}
.range-input::-moz-range-progress {
  height: 4px;
  background: var(--firstColor, red);
  border-radius: 999px;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--firstColor);
  cursor: pointer;
  margin-top: calc((8px - 20px) / 2);
}

.range-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--firstColor);
  cursor: pointer;
}




/*
//
// Domain Search
//
*/

.domain-search-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 15px;
}

.domain-search{
  display: flex;
  flex: 1;
  width: 100%;
  max-width: 600px;
}

/*
//
// Domain Result
//
*/

.domain-result-container {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #fbfbfb;
}

.domain-results-card {
  width: 100%;
  max-width: 1000px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  overflow: hidden;
}

/*
//
// Domain Results Table
//
*/

.domain-results-table {
  padding: 20px;
  width: 100%;
  max-width: 1200px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  line-height: 1.45;
  color: #1a1a1a;
}

.domain-results-table thead th {
  text-align: left;
  font-weight: 600;
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  font-family: var(--fontFamilyText);
  color: var(--textColor-4);
  font-size: 13px;
}

.domain-results-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
  font-family: var(--fontFamilyText);
  color: var(--textColor-3);
  font-size: 12px;
}

.domain-results-table tbody tr:hover {
  background: #f9fafb;
}

.domain-results-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.domain-results-table thead th:last-child,
.domain-results-table tbody td:last-child {
  width: 1%;
  white-space: nowrap;
}

.domain-results-table tbody td:last-child .row-actions {
  display: inline-flex;
  gap: 8px;
  white-space: nowrap;
}

.domain-results-table tbody td:last-child .btn {
  width: auto;
}

.actions-col {
  width: 1%;
  white-space: nowrap;
}

/*
//
// In Cart
//
*/



.row-actions .go-to-cart { margin-left: 2px; }


/*
//
// Badge
//
*/

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .2px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  color: #111827;
}

.badge--free {
  color: #059669;
  border-color: rgba(5,150,105,.25);
}

/*
//
// Button
//
*/

.btn {
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .05s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, opacity .2s ease;
}

.btn:hover {
  background: #f3f4f6;
}

.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(59,130,246,.15);
}

.btn--primary {
  background: #2563eb;
  border-color: transparent;
  color: #ffffff;
}

.btn--primary:hover {
  filter: brightness(0.98);
}

.btn--ghost {
  background: transparent;
}

.btn[disabled],
.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.row-actions {
  display: inline-flex;
  gap: 8px;
  white-space: nowrap;
}

/*
//
// Caption
//
*/

.caption {
  font-size: 12px;
  color: #6b7280;
  margin: 10px 16px 16px;
}

/*
//
// Responsive
//
*/

@media (max-width: 720px) {
  .domain-results-table thead {
    display: none;
  }
  .domain-results-table,
  .domain-results-table tbody,
  .domain-results-table tr,
  .domain-results-table td {
    display: block;
    width: 100%;
  }
  .domain-results-table tbody tr {
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
  }
  .domain-results-table tbody tr:hover {
    background: transparent;
  }
  .domain-results-table tbody td {
    border: 0;
    padding: 8px 0;
  }
  .domain-results-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 2px;
  }
  .num {
    text-align: left;
  }
  .row-actions {
    margin-top: 8px;
    display: flex;
    justify-content: flex-start;
    gap: 10px;
  }
}

/*
//
// Sticky Header
//
*/

@media (min-width: 721px) {
  .domain-results-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}



/*
//
// Cart
//
*/

/* Cart layout */
.cart-container {
max-width: 1080px;
margin: 0 auto;
padding: 24px 16px 56px;
}

.cart-container h1 {
text-align: center;
font-size: 28px;
font-weight: 700;
margin: 12px 0 24px;
}

/* Grid */
.cart-grid {
display: grid;
grid-template-columns: 1fr 330px;
gap: 24px;
}

@media (max-width: 960px) {
.cart-grid {
grid-template-columns: 1fr;
}
}

.cart-summary {
border-left: 1px solid #e5e7eb;
padding: 0rem 1rem;
}

@media (max-width: 640px) {
.cart-summary {
border-left: 0;
border-top: 1px solid #e5e7eb;
padding-top: 16px;
}
}

/* Table */
.cart-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
table-layout: auto;
}

.cart-table thead th {
text-align: left;
color: #6b7280;
font-weight: 600;
padding: 12px 12px;
border-bottom: 1px solid #f0f0f0;
white-space: nowrap;
}

.cart-table tbody td {
padding: 14px 12px;
border-bottom: 1px solid #f5f5f5;
vertical-align: middle;
background: #fff;
}

.cart-table tbody tr:last-child td {
border-bottom: none;
}

/* Column sizing */
.col-title {
width: auto;
min-width: 240px;
}

.col-term,
.col-autorenew,
.col-renew,
.col-price,
.col-qty,
.col-subtotal,
.col-actions {
width: 1%;
white-space: nowrap;
}

.col-num {
text-align: right;
}

.col-actions {
text-align: right;
}

/* Product */
.prod-title strong {
display: block;
font-weight: 600;
color: #111827;
}

.prod-meta {
color: #6b7280;
font-size: 12px;
}

/* Term select & qty */
.term-select {
appearance: none;
padding: 8px 10px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
font: inherit;
}

.qty {
min-width: 28px;
text-align: center;
padding: 6px 10px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #f9fafb;
}

/* Auto-renew */
.autorenew-label {
display: inline-flex;
gap: 6px;
align-items: center;
user-select: none;
}

/* Link-style button */
.link-btn {
background: transparent;
border: none;
color: #6b7280;
font-weight: 600;
cursor: pointer;
padding: 8px 10px;
border-radius: 8px;
display: inline-flex;
align-items: center;
line-height: 1;
min-height: 40px;
min-width: 40px;
}

.link-btn:hover {
color: #111827;
text-decoration: underline;
}

.link-btn svg {
display: inline-block;
vertical-align: middle;
}

/* Actions row */
.cart-actions {
display: flex;
justify-content: flex-end;
margin-top: 20px;
gap: 6px;
}

/* Summary */
.cart-summary h2 {
font-size: 18px;
font-weight: 700;
margin: 4px 0 12px;
}

.totals {
margin: 0 0 12px;
}

.totals .row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 0;
border-bottom: 1px solid #f3f4f6;
}

.totals .row:last-child {
border-bottom: none;
}

.totals dt {
color: #6b7280;
}

.totals dd {
margin: 0;
font-weight: 600;
color: #111827;
}

.totals .row.total dt,
.totals .row.total dd {
font-size: 16px;
font-weight: 700;
}

.cart-summary .smallprint {
color: #9ca3af;
font-size: 12px;
margin-top: 10px;
}

/* Empty state */
.cart-empty {
text-align: center;
background: #fff;
border: 1px dashed #e5e7eb;
border-radius: 12px;
padding: 40px 16px;
}

.cart-empty-illustration {
font-size: 40px;
line-height: 1;
margin-bottom: 8px;
}

.cart-empty h2 {
font-size: 20px;
margin: 6px 0;
}

.cart-empty p {
color: #6b7280;
margin: 0 0 12px;
}

.cart-empty-actions {
display: flex;
justify-content: center;
gap: 8px;
}

/*
//
// Responsive
//
*/

/* Hide price column on small screens */
@media (max-width: 640px) {
.cart-table .col-price { display: none; }
.cart-table thead .col-price { display: none; }
}

/* Mobile cards */
@media (max-width: 640px) {

.cart-grid {
gap: 16px;
}

/* Hide native head */
.cart-table thead {
position: absolute;
left: -9999px;
top: -9999px;
height: 0;
width: 0;
overflow: hidden;
}

/* Block layout to avoid clipping */
.cart-table,
.cart-table tbody,
.cart-table tr,
.cart-table td {
display: block;
}

/* Card row */
.cart-table tbody tr {
border: 1px solid #f0f0f0;
border-radius: 12px;
padding: 12px;
margin-bottom: 12px;
background: #fff;
}

/* Cell rows with label + value */
.cart-table tbody td {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
border-bottom: none;
width: 100%;
white-space: normal;
}

.cart-table tbody td:first-child { padding-top: 2px; }
.cart-table tbody td:last-child { padding-bottom: 2px; }

/* Labels */
.cart-table tbody td::before {
content: attr(data-label);
color: #6b7280;
font-weight: 600;
margin-right: 12px;
flex: 1 1 auto;
text-align: left;
}

.cart-table .col-title::before { content: 'Product'; }
.cart-table .col-subtotal::before { content: 'Subtotal'; }
.cart-table .col-term::before { content: 'Term'; }
.cart-table .col-autorenew::before { content: 'Auto-renew'; }
.cart-table .col-qty::before { content: 'Qty'; }
.cart-table .col-actions::before { content: ''; }

/* Title block */
.cart-table .col-title {
align-items: flex-start;
}

.prod-title strong {
font-size: 15px;
}

/* Subtotal emphasis */
.cart-table .col-subtotal strong {
font-size: 16px;
}

/* Controls sizing */
.term-select {
width: 140px;
min-height: 38px;
}

.qty {
min-width: 44px;
padding: 8px 12px;
}

.autorenew-label {
gap: 8px;
}

/* Actions */
.col-actions,
.col-qty,
.col-term,
.col-autorenew,
.col-subtotal {
width: auto;
white-space: normal;
}

.cart-table .col-actions {
display: flex;
justify-content: flex-end;
}

.link-btn {
padding: 10px 12px;
border-radius: 10px;
}
}

/* Small phones */
@media (max-width: 480px) {
.cart-table tbody tr {
padding: 10px;
border-radius: 10px;
}

.term-select {
width: 120px;
}

.prod-title strong {
font-size: 14px;
}
}

/*
//
// WHOIS Finish domain setup message
//
*/
/*
.whois-banner {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--secondColorPastel);
  color: var(--textColor-5);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fontFamilyText);
  font-weight: 400;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

.whois-banner__message {
  flex-shrink: 0;
}

.whois-banner__open-btn {
  margin-left: auto;

}

.whois-banner__open-btn:hover {
  opacity: 0.9;
}

.whois-banner__close-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: 100px;
}

.whois-banner__close-btn svg{
  width: 15px;
  height: 15px;
  fill: var(--text-color-light);
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 2px;
  transition: all 0.5s ease;
}

.whois-banner__close-btn:hover svg {
  fill: var(--errorColor);
  border-color: var(--errorColor);
}
*/


/*
//
// Section container
//
*/

.section-container {
  max-width: 1440px;
  margin: 32px auto;
}


/*
//
// WHOIS
//
*/

.whois-container > h1 {
  text-align: center;
  margin: 12px 0 24px;
}

.whois-grid {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 16px;
}


.whois-domains {
  border: none;
  border-radius:0 ;
  padding: 0rem 1rem;
  border-right: 1px solid #e5e7eb
}

.whois-domains h2{
  margin: 0 0 8px;
  font-size: 1.125rem;
}

#whois-form-overlay{
  background-color: rgba(255, 255, 255, 0.521);
}

.domain-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.domain-item + .domain-item {
  border-top: 1px solid #f1f5f9;
}

.domain-row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  padding: 12px 4px;
  align-items: start;
  cursor: pointer;
}

.domain-name {
  font-weight: 600;
}

.domain-meta {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.whois-domain-actions {
  margin-top: 12px;
}

/* Form */
.whois-form h2 {
  margin: 0 0 8px;
  font-size: 1.125rem;
}

.form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.copy-all {
  font-size: 13px;
  color: #374151;
  color: var(--firstColor);
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 600;
}

.whois-fieldset {
  border: none;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.whois-fieldset legend {
  font-weight: 600;
  padding: 0 6px;
}

.whois-fieldset .grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.whois-fieldset .grid .full {
  grid-column: 1 / -1;
}

.whois-fieldset label span {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}

.whois-fieldset input,
.whois-fieldset select {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  box-sizing: border-box;
}

.whois-fieldset input[readonly],
.whois-fieldset select[readonly],
.whois-fieldset textarea[readonly] {
  background: #f9fafb;
  color: #6b7280;
  cursor: default;
}

.whois-options {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.checkbox-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

.whois-submit-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
}

.smallprint {
  color: #6b7280;
  font-size: 12px;
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 980px) {
  .whois-grid {
    grid-template-columns: 1fr;
  }
}

.whois-fieldset.collapsible legend {
  padding: 0;
}

.collapse-toggle {
  all: unset;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  cursor: pointer;
  padding: 0 6px;
  font-weight: 600;
}

.collapse-toggle-title{
  display: block;
  width: 100px;
}

.collapse-toggle:focus-visible {
  outline: 2px solid #93c5fd;
  border-radius: 6px;
}

.optional-note {
  font-weight: 400;
  color: #6b7280;
  margin-left: 2px;
}

.collapse-content[hidden] {
  display: none;
}

.chevron {
  transition: transform 0.18s ease;
}

.collapse-toggle[aria-expanded="false"] .chevron {
  transform: rotate(-90deg);
}

.collapse-toggle[aria-expanded="true"] .chevron {
  transform: rotate(0deg);
}

.whois-fieldset.collapsible.open {
  border-color: #e5e7eb;
}

#whois-register-btn {
  white-space: nowrap;              /* Text bricht nie um */
  flex-shrink: 0;                   /* schrumpft nicht innerhalb der Flex-Zeile */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;                     /* konsistente Höhe */
  align-self: flex-start;
}







/*
//
// Complete-your-profile Banner
//
*/

#profile-reminder-container {
  position: fixed;
  bottom: 1rem;              
  left: 1rem;
  z-index: 1010;            
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.profile-reminder {
  background: #111827; 
  background: #1f2b43; 
  color: #fff;
  padding: 14px 16px 20px 16px;
  width: 300px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
  font-family: var(--fontFamilyText, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity .4s ease, transform .4s ease;
  position: relative;
  overflow: hidden;       
  display: flex;
  flex-direction: column;
  gap: 4px;  
}


.profile-reminder.show {
  opacity: 1;
  transform: translateY(0);
}

.profile-reminder__title {
  font-weight: 600;
  margin: 0 0 6px 0;
  font-size: 15px;
  color: #fff;
}

.profile-reminder__text {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #e5e7eb;
}

.profile-reminder__actions {
  display: flex;
  gap: 8px;
}

.profile-reminder__btn {
  appearance: none;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.profile-reminder__btn--primary {
  background: var(--firstColor, #2563eb);
  color: #fff;
}

.profile-reminder__btn--ghost {
  background: transparent;
  color: #fff;
  opacity: .8;
}

/* Progress bar – nutzt gleiche Logik wie .notification .notification-progress */
.profile-reminder__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  background: rgba(255,255,255,.25); /* Base track */
  overflow: hidden;
}
.profile-reminder__progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: rgba(255,255,255,.6);  /* Fill */
  transform-origin: left center;
  transition: width .4s ease;
}

.profile-reminder__meta {
  position: absolute;
  right: 8px; bottom: 8px;
  font-size: 11px;
  color: #d1d5db;
}

/*
//
// Complete-your-domain Banner
//
*/

.whois-reminder {
  background: #1f2b43;
  color: #fff;
  padding: 14px 16px 20px 16px;
  width: 300px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,.1);
  font-family: var(--fontFamilyText, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity .4s ease, transform .4s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.whois-reminder.show {
  opacity: 1;
  transform: translateY(0);
}

.whois-reminder__title {
  font-weight: 600;
  margin: 0 0 6px 0;
  font-size: 15px;
  color: #fff;
}

.whois-reminder__text {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: #e5e7eb;
}

.whois-reminder__actions {
  display: flex;
  gap: 8px;
}

.whois-reminder__btn {
  appearance: none;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.whois-reminder__btn--primary {
  background: var(--firstColor, #2563eb);
  color: #fff;
}

.whois-reminder__btn--ghost {
  background: transparent;
  color: #fff;
  opacity: .8;
}

.whois-reminder__progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  background: rgba(255,255,255,.25);
  overflow: hidden;
}

.whois-reminder__progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: rgba(255,255,255,.6);
  transform-origin: left center;
  transition: width .4s ease;
}

.whois-reminder__meta {
  position: absolute;
  right: 8px; bottom: 8px;
  font-size: 11px;
  color: #d1d5db;
}


/*
//
// Main Container
//
*/

main.container { 
  display:block !important;
  max-width: 1440px;
  margin: 32px auto;
  padding: 0 16px;
}

/*
//
// Muted
//
*/

.muted {
  color:#6b7280;
  font-size:14px;
}

/*
//
// Card
//
*/

.card {
  border-radius:12px;
  margin-bottom:16px;
  background:#fff;
  padding: 5px 0px;
}

.card .actions {
  gap: 8px;
  margin-top:12px;
}


/*
//
// Grid
//
*/

.grid {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.grid-1 { display:grid; grid-template-columns:1fr; gap:12px; }

/*
//
// Form Labels
//
*/
.label { font-size: 13px; color:#374151; margin-bottom:4px; display:block; }

/*
//
// Inputs
//
*/

.chips{
  padding: 0;
}

/*
//
// Chips
//
*/

.chip {
  display:inline-flex; 
  gap:6px;
  align-items:center;
  padding:.35rem .6rem;
  border:1px solid #d1d5db;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
}

.chip.active {
  background: var(--firstColor, #2563eb);
  color:#fff;
  border-color: transparent;
}

/*
//
// Buttons
//
*/
.btn { border:none; border-radius:8px; padding:.7rem 1rem; cursor:pointer; font-weight:600; }
.btn-primary { background: var(--firstColor, #2563eb); color:#fff; }

/*
//
// Section Title
//
*/

.section-title {
  margin:0 0 8px;
  font-size:1.125rem;
}

/*
//
// Two Factor Row
//
*/
.twofa-row { display:flex; align-items:center; justify-content:space-between; gap:12px; }


/*
//
// Data Table
//
*/
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th,
.data-table td {
  padding: 10px 8px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
}
.data-table th { color:#374151; font-weight:700; }
.data-table tr:hover td { background:#fafafa; }

/*
//
// Table Wrapper
//
*/


.table-wrapper { overflow:auto; }


/*
//
// Domain overview
//
*/

.domov-table-wrap {
  background: #fff;
  overflow: hidden;
  border-radius: 4px;
}

/*
//
// Table
//
*/

tbody td{
  cursor: pointer;
}

.domov-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;

}

.domov-table thead tr{
  background-color: #fafafa;

}

.domov-table thead th {
text-align: left;
font-weight: 600;
color: #374151;
padding: 12px 14px;
border-bottom: 1px solid rgba(0,0,0,.06);
}

.domov-table tbody td {
padding: 12px 14px;
border-top: 1px solid rgba(0,0,0,.04);
vertical-align: middle;
}

.domov-table tbody tr:hover {
background: #f9fafb;
}

.domov-col-actions {
width: 1%;
white-space: nowrap;
}

.domov-col-status {
width: 1%;
white-space: nowrap;
}

.domov-col-expiry {
width: 1%;
white-space: nowrap;
}

/*
//
// Domain cell
//
*/

.domov-col-domain {
  width: 40%;

}

.domov-domain {
font-weight: 700;
color: #111827;
}

.domov-sub {
margin-top: 3px;
color: #6b7280;
font-size: 12px;
display: flex;
gap: 6px;
align-items: center;
}

/*
//
// Chips
//
*/

.domov-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
  background-color: var(--firstColorPastel);
  color: rgb(39, 31, 184);
  border-radius: 4px; 
  border: 1px solid var(--firstColor);
}

.domov-chip--ghost {
  color: #374151;
  background: #e5e7eb;
  background-color: #fafafa;
  color: var(--textColor-4);
  border-radius: 4px; 
  border: 1px solid rgb(190, 196, 204);
}

.domov-chip--ok {
color: #065f46;
background: #d1fae5;
}

.domov-chip--warn {
color: #92400e;
background: #fef3c7;
}

.domov-chip--err {
color: #7f1d1d;
background: #fee2e2;
}

/*
//
// Status badges
//
*/

.domov-status {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
line-height: 1.4;
font-weight: 600;
}

.status--ok {
color: #065f46;
background: #d1fae5;
}

.status--info {
color: #1e3a8a;
background: #e0e7ff;
}

.status--warn {
color: #92400e;
background: #fef3c7;
}

.status--err {
color: #7f1d1d;
background: #fee2e2;
}

.status--muted {
color: #374151;
background: #e5e7eb;
}

/*
//
// Expiry
//
*/

.domov-expiry-date {
font-weight: 600;
color: #111827;
}

.domov-expiry-left {
margin-top: 2px;
font-size: 12px;
color: #6b7280;
}

/*
//
// Links / Actions
//
*/

.domov-link {
color: var(--firstColor, #2563eb);
font-weight: 600;
text-decoration: none;
cursor: pointer;
}

.domov-link:hover {
text-decoration: underline;
}

/*
//
// Helpers
//
*/

.domov-empty,
.domov-error,
.domov-loading {
text-align: center;
color: #6b7280;
padding: 16px;
font-size: 14px;
}


/*
//
// Responsive
//
*/

/*
//
// ≤ 720px
//
*/
@media (max-width: 720px) {
.domov-table-wrap {
margin: 24px auto 0;
border-radius: 10px;
padding: 0;
}

.domov-table {
display: block;
width: 100%;
}

.domov-table thead {
display: none;
}

.domov-table tbody {
display: block;
}

.domov-table tbody tr {
display: block;
padding: 12px 14px;
border-top: 1px solid rgba(0,0,0,.06);
background: #fff;
}

.domov-table tbody tr:hover {
background: #fff;
}

.domov-table tbody td {
display: block;
width: 100%;
padding: 6px 0;
border: 0;
}

.domov-col-domain {
padding-bottom: 8px;
}

.domov-domain {
font-size: 16px;
line-height: 1.3;
}

.domov-sub {
margin-top: 6px;
gap: 6px;
}

.domov-col-status,
.domov-col-whois,
.domov-col-expiry,
.domov-col-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.domov-col-status::before,
.domov-col-whois::before,
.domov-col-expiry::before,
.domov-col-actions::before {
content: attr(data-label);
font-size: 12px;
color: #6b7280;
font-weight: 600;
flex: 0 0 auto;
}

.domov-col-status { order: 2; }
.domov-col-whois { order: 3; }
.domov-col-expiry { order: 4; }
.domov-col-actions{ order: 5; }

.domov-col-actions .domov-link {
display: inline-block;
padding: 8px 0;
}

.domov-expiry-left {
font-size: 12px;
}

.domov-status,
.domov-chip {
padding: 3px 10px;
font-size: 12px;
}
}


/* Clickbare Zeilen */
#domain-overview tbody tr[data-domain] { cursor: pointer; }
#domain-overview tbody tr[data-domain][aria-expanded="true"] { background: #f9fafb; }

/* Details-Zeile */
#domain-overview tr.domov-row-details > td{
  background:#fbfbfd;
  padding:20px 24px;
  border-top:1px solid rgba(0,0,0,.06);
}

.domov-details-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.domov-details-grid h4{
  margin:0 0 8px;
  font-size:13px;
  color:#111827;
  font-weight:600;
}

.domov-contact-sec{ margin-bottom:16px; }

.domov-kv{
  list-style:none;
  margin:0;
  padding:0;
}
.domov-kv li{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:12px;
  padding:6px 0;
  border-top:1px dashed rgba(0,0,0,.06);
}
.domov-kv li:first-child{ border-top:0; }
.domov-kv strong{
  color:#6b7280;
  font-weight:600;
}

/* Responsive */
@media (max-width: 720px){
  .domov-details-grid{ grid-template-columns:1fr; gap:16px; }
  .domov-kv li{ grid-template-columns:120px 1fr; }
}