@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

:root {
  --main-font-family: "Roboto", sans-serif;

  /* Pastell-Farben */
  --primary-color: #A7DBD8; /* pastel teal */
  --primary-rgb: 167, 219, 216; /* pastel teal */
  --primary-filter: 83, 109, 105; /* pastel teal */
  --accent-color: #F78DA7; /* pastel pink */
  --accent-rgb: 247, 141, 167; /* pastel pink */
  --accent-filter: 130, 54, 70;

  /* Standardfarben */
  --danger-color: #F28E8E; /* pastel red */
  --success-color: #d6c3B4; /* pastel green */
  --info-color: #A2C8E2; /* pastel blue */
  --warning-color: #FFE59D; /* pastel amber */

  --danger-rgb: 242, 142, 142; /* pastel red */
  --success-rgb: 198, 229, 179; /* pastel green */
  --info-rgb: 162, 200, 226; /* pastel blue */
  --warning-rgb: 255, 229, 157; /* pastel amber */

  --deep-purple-color: #CFB5E1; /* pastel purple */
  --red-color: #F28E8E; /* pastel red */
  --orange-color: #FFAB91; /* pastel orange */
  --blue-color: #A2C8E2; /* pastel blue */
  --green-color: #d6c3B4; /* pastel green */
  --teal-color: #A7DBD8; /* pastel teal */
  --amber-color: #FFE59D; /* pastel amber */
  --pink-color: #F78DA7; /* pastel pink */
  --indigo-color: #B2A5D2; /* pastel indigo */
  --blue-grey-color: #B0BEC5; /* pastel blue-grey */
  --brown-color: #D7CCC8; /* pastel brown */
  --cyan-color: #80DEEA; /* pastel cyan */
  --light-green-color: #C8E6C9; /* pastel light green */
  --purple-color: #E1BEE7; /* pastel purple */
  --grey-color: #D3D3D3; /* pastel grey */

  --border-radius: 12px;
  --border-radius-button: 38px;
  --border-radius-50percent: 50%;
  --border-radius-50percent-Category: 50%;
  
  --brand-facebook-color: #3b5998;
  --brand-twitter-color: #1da1f2;
  --brand-dribbble-color: #ea4c89;
  --brand-google-plus-color: #ea4335;
  --brand-linkedin-color: #007bb5;
  --brand-whatsapp-color: #4fce5d;
  --brand-gmail-color: #D44638;
  --brand-pinterest-color: #E60023;
  --brand-instagram-color: #A2292E;
  --brand-microsoft-color: #00A4EF;

  --dark-900: #263238;
  --dark-800: #37474F;
  --dark-700: #455a64;
  --dark-600: #546E7A;

  /* Desktop */
  --font-size-h1: 26.5px; /* 25.2px erhöht */
  --line-height-h1: 45.6px; /* 43.4px erhöht */
  --margin-h1: 0.35rem; /* 1.26rem erhöht */

  --font-size-h2: 22.2px; /* 21px erhöht */
  --line-height-h2: 38.5px; /* 36.4px erhöht */
  --margin-h2: 0.35rem; /* 1.05rem erhöht */

  --font-size-h3: 19.3px; /* 18.2px erhöht */
  --line-height-h3: 33.3px; /* 31.5px erhöht */
  --margin-h3: 0.3rem; /* 1.05rem erhöht */

  --font-size-h4: 17.3px; /* 16.1px erhöht */
  --line-height-h4: 29.1px; /* 27.3px erhöht */
  --margin-h4: 0.18rem; /* 0.98rem erhöht */

  --font-size-h5: 15.2px; /* 14px erhöht */
  --line-height-h5: 25.7px; /* 23.8px erhöht */
  --margin-h5: 0.18rem; /* 0.77rem erhöht */

  --font-size-h6: 13.6px; /* 12.6px erhöht */
  --line-height-h6: 22.5px; /* 21px erhöht */
  --margin-h6: 0.18rem; /* 0.63rem erhöht */

  /* Media Queries für Tablets */
  --tablet-font-size-h1: 22.4px; --tablet-line-height-h1: 38.5px;
  --tablet-font-size-h2: 19.6px; --tablet-line-height-h2: 33.6px;
  --tablet-font-size-h3: 16.8px; --tablet-line-height-h3: 29.4px;
  --tablet-font-size-h4: 14.7px; --tablet-line-height-h4: 25.2px;
  --tablet-font-size-h5: 13.3px; --tablet-line-height-h5: 23.1px;
  --tablet-font-size-h6: 11.9px; --tablet-line-height-h6: 20.3px;

  /* Media Queries für Mobilgeräte */
  --mobile-font-size-h1: 19.6px; --mobile-line-height-h1: 33.6px;
  --mobile-font-size-h2: 16.8px; --mobile-line-height-h2: 28.7px;
  --mobile-font-size-h3: 14.7px; --mobile-line-height-h3: 25.2px;
  --mobile-font-size-h4: 12.6px; --mobile-line-height-h4: 21.7px;
  --mobile-font-size-h5: 11.2px; --mobile-line-height-h5: 19.6px;
  --mobile-font-size-h6: 9.8px;  --mobile-line-height-h6: 16.8px;  
}

/* Anpassung der Farbthemen */

body[data-theme="red"] {
  --gold: #DAA520;
  --beere: #F28E8E; /* pastel red */

  --head-bck-grnd: #F28E8E;
  --footer-bck-grnd: #F28E8E;
  --txt-color-head: #DAA520;
  --txt-color-footer: #555; /* Dunkler für bessere Lesbarkeit */

  --bck-grnd-color-general-rgba: 242, 142, 142;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555; /* Dunkler für bessere Lesbarkeit */
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #F28E8E;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;

    /* Additional attributes in Soft Pastel */
    --primary-color: #FFB6B6; /* Soft Pastel Red */
    --primary-rgb: 255, 182, 182; /* RGB equivalent of Soft Pastel Red */
    --primary-filter: 75, 34, 34; /* Adjust based on actual needs */
    
    --accent-color: #F4C542; /* Soft Pastel Gold */
    --accent-rgb: 244, 197, 66; /* RGB equivalent of Soft Pastel Gold */
    --accent-filter: 63, 81, 181; /* Adjust based on actual needs */
}

body[data-theme="orange"] {
  --gold: #DAA520;
  --beere: #FFAB91; /* pastel orange */

  --head-bck-grnd: #FFAB91;
  --footer-bck-grnd: #FFAB91;
  --txt-color-head: #DAA520;
  --txt-color-footer: #555; /* Dunkler für bessere Lesbarkeit */

  --bck-grnd-color-general-rgba: 255, 171, 145;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555;
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #FFAB91;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;

  /* Additional attributes in Soft Pastel */
  --primary-color: #FFD1B3; /* Soft Pastel Orange */
  --primary-rgb: 255, 209, 179; /* RGB equivalent of Soft Pastel Orange */
  --primary-filter: 114, 58, 41; /* Adjust based on actual needs */
  
  --accent-color: #F4C542; /* Soft Pastel Gold */
  --accent-rgb: 244, 197, 66; /* RGB equivalent of Soft Pastel Gold */
  --accent-filter: 63, 81, 181; /* Adjust based on actual needs */  
}

body[data-theme="blue"] {
  --primary-color: #A2C8E2; /* pastel blue */
  --primary-rgb: 162, 200, 226; /* pastel blue */
  --primary-filter: 80, 120, 140; /* pastel blue */
  --accent-color: #F28E8E; /* pastel red */
  --accent-rgb: 242, 142, 142; /* pastel red */
  
  --gold: #DAA520;
  --beere: #A2C8E2;

  --head-bck-grnd: #A2C8E2;
  --footer-bck-grnd: #A2C8E2;
  --txt-color-head: #DAA520;
  --txt-color-footer: #555;

  --bck-grnd-color-general-rgba: 162, 200, 226;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555;
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #A2C8E2;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;
}

body[data-theme="teal"] {
  --primary-color: #A7DBD8; /* pastel teal */
  --primary-rgb: 167, 219, 216; /* pastel teal */
  --primary-filter: 80, 109, 105; /* pastel teal */
  --accent-color: #F78DA7; /* pastel pink */
  --accent-rgb: 247, 141, 167; /* pastel pink */
  
  --gold: #DAA520;
  --beere: #A7DBD8;

  --head-bck-grnd: #A7DBD8;
  --footer-bck-grnd: #A7DBD8;
  --txt-color-head: #DAA520;
  --txt-color-footer: #555;

  --bck-grnd-color-general-rgba: 167, 219, 216;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555;
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #A7DBD8;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;
}

body[data-theme="pink"] {
  --primary-color: #F78DA7; /* pastel pink */
  --primary-rgb: 247, 141, 167; /* pastel pink */
  --primary-filter: 130, 60, 80; /* pastel pink */
  --accent-color: #A7DBD8; /* pastel teal */
  --accent-rgb: 167, 219, 216; /* pastel teal */
  
  --gold: #DAA520;
  --beere: #F78DA7;

  --head-bck-grnd: #F78DA7;
  --footer-bck-grnd: #F78DA7;
  --txt-color-head: #DAA520;
  --txt-color-footer: #555;

  --bck-grnd-color-general-rgba: 247, 141, 167;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555;
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #F78DA7;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;
}

body[data-theme="light-green"] {
  --primary-color: #D4E157; /* pastel light green */
  --primary-rgb: 212, 225, 87; /* pastel light green */
  --primary-filter: 70, 90, 30; /* pastel light green */
  --accent-color: #FFCDD2; /* pastel red */
  --accent-rgb: 255, 205, 210; /* pastel red */
  
  --gold: #DAA520;
  --beere: #D4E157;

  --head-bck-grnd: #D4E157;
  --footer-bck-grnd: #D4E157;
  --txt-color-head: #555;
  --txt-color-footer: #555;

  --bck-grnd-color-general-rgba: 212, 225, 87;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555;
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #D4E157;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;
}

body[data-theme="purple"] {
  --primary-color: #CE93D8; /* pastel purple */
  --primary-rgb: 206, 147, 216; /* pastel purple */
  --primary-filter: 100, 60, 120; /* pastel purple */
  --accent-color: #A5D6A7; /* pastel green */
  --accent-rgb: 165, 214, 167; /* pastel green */
  
  --gold: #DAA520;
  --beere: #CE93D8;

  --head-bck-grnd: #CE93D8;
  --footer-bck-grnd: #CE93D8;
  --txt-color-head: #555;
  --txt-color-footer: #555;

  --bck-grnd-color-general-rgba: 206, 147, 216;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555;
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #CE93D8;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;
}

body[data-theme="green"] {
  --primary-color: #D6C3B4;             /* neues Brown-Beige */
  --primary-rgb: 214, 195, 180;         /* passende RGB */
  --primary-filter: 110, 95, 80;        /* leicht angepasst für Filter */

  --accent-color: #E5A2B6;              /* bleibt */
  --accent-rgb: 229, 162, 182;

  --gold: #D2B48C;                      /* bleibt (Sandgold) */
  --beere: #BFAFA4;                     /* harmonisiertes Gegenstück */

  --head-bck-grnd: #D6C3B4;
  --footer-bck-grnd: #D6C3B4;

  --txt-color-head: #3A3A3A;
  --txt-color-footer: #3A3A3A;

  --bck-grnd-color-general-rgba: 214, 195, 180;
  --opacity-level-rgba: 0.85;

  --txt-color-writegeneral: #3A3A3A;
  --txt-color-general: #3A3A3A;

  --border-color-general: #BFAFA4;

  --txt-color-general-e: #3A3A3A;
  --bck-grnd-color-general: #D6C3B4;
  --bck-grnd-color-general-hover: #E3D6CC; /* heller und harmonischer */
  --bck-grnd-color-table: #F8F5F2;         /* Creme-Weiss */
}


body[data-theme="deep-purple"] {
  --primary-color: #B39DDB; /* pastel deep purple */
  --primary-rgb: 179, 157, 219; /* pastel deep purple */
  --primary-filter: 90, 60, 120; /* pastel deep purple */
  --accent-color: #B2EBF2; /* pastel cyan */
  --accent-rgb: 178, 235, 242; /* pastel cyan */
  
  --gold: #DAA520;
  --beere: #B39DDB;

  --head-bck-grnd: #B39DDB;
  --footer-bck-grnd: #B39DDB;
  --txt-color-head: #555;
  --txt-color-footer: #555;

  --bck-grnd-color-general-rgba: 179, 157, 219;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555;
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #B39DDB;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;
}

body[data-theme="amber"] {
  --primary-color: #FFE59D; /* pastel amber */
  --primary-rgb: 255, 229, 157; /* pastel amber */
  --primary-filter: 140, 120, 70; /* pastel amber */
  --accent-color: #CFB5E1; /* pastel purple */
  --accent-rgb: 207, 181, 225; /* pastel purple */
  
  --gold: #DAA520;
  --beere: #FFE59D;

  --head-bck-grnd: #FFE59D;
  --footer-bck-grnd: #FFE59D;
  --txt-color-head: #DAA520;
  --txt-color-footer: #555;

  --bck-grnd-color-general-rgba: 255, 229, 157;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555;
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #FFE59D;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;
}

body[data-theme="indigo"] {
  --primary-color: #B2A5D2; /* pastel indigo */
  --primary-rgb: 178, 165, 210; /* pastel indigo */
  --primary-filter: 90, 80, 110; /* pastel indigo */
  --accent-color: #FFAB91; /* pastel orange */
  --accent-rgb: 255, 171, 145; /* pastel orange */
  
  --gold: #DAA520;
  --beere: #B2A5D2;

  --head-bck-grnd: #B2A5D2;
  --footer-bck-grnd: #B2A5D2;
  --txt-color-head: #DAA520;
  --txt-color-footer: #555;

  --bck-grnd-color-general-rgba: 178, 165, 210;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555;
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #B2A5D2;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;
}

body[data-theme="blue-grey"] {
  --primary-color: #B0BEC5; /* pastel blue-grey */
  --primary-rgb: 176, 190, 197; /* pastel blue-grey */
  --primary-filter: 90, 100, 110; /* pastel blue-grey */
  --accent-color: #80DEEA; /* pastel cyan */
  --accent-rgb: 128, 222, 234; /* pastel cyan */
  
  --gold: #DAA520;
  --beere: #B0BEC5;

  --head-bck-grnd: #B0BEC5;
  --footer-bck-grnd: #B0BEC5;
  --txt-color-head: #DAA520;
  --txt-color-footer: #555;

  --bck-grnd-color-general-rgba: 176, 190, 197;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555;
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #B0BEC5;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;
}

body[data-theme="brown"] {
  --primary-color: #D7B19D; /* pastel brown */
  --primary-rgb: 215, 177, 157; /* pastel brown */
  --primary-filter: 90, 70, 60; /* pastel brown */
  --accent-color: #FFE082; /* pastel amber */
  --accent-rgb: 255, 224, 130; /* pastel amber */
  
  --gold: #DAA520;
  --beere: #D7B19D;

  --head-bck-grnd: #D7B19D;
  --footer-bck-grnd: #D7B19D;
  --txt-color-head: #555;
  --txt-color-footer: #555;

  --bck-grnd-color-general-rgba: 215, 177, 157;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555;
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #D7B19D;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;
}

body[data-theme="cyan"] {
  --primary-color: #A1E9F2; /* pastel cyan */
  --primary-rgb: 161, 233, 242; /* pastel cyan */
  --primary-filter: 90, 160, 170; /* pastel cyan */
  --accent-color: #FFD180; /* pastel orange */
  --accent-rgb: 255, 209, 128; /* pastel orange */
  
  --gold: #DAA520;
  --beere: #A1E9F2;

  --head-bck-grnd: #A1E9F2;
  --footer-bck-grnd: #A1E9F2;
  --txt-color-head: #555;
  --txt-color-footer: #555;

  --bck-grnd-color-general-rgba: 161, 233, 242;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555;
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #A1E9F2;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;
}

body[data-theme="grey"] {
  --primary-color: #D3D3D3; /* pastel grey */
  --primary-rgb: 211, 211, 211; /* pastel grey */
  --primary-filter: 80, 80, 80; /* pastel grey */
  --accent-color: #B2EBF2; /* pastel teal */
  --accent-rgb: 178, 235, 242; /* pastel teal */
  
  --gold: #DAA520;
  --beere: #D3D3D3;

  --head-bck-grnd: #D3D3D3;
  --footer-bck-grnd: #D3D3D3;
  --txt-color-head: #555;
  --txt-color-footer: #555;

  --bck-grnd-color-general-rgba: 211, 211, 211;
  --opacity-level-rgba: 0.8;

  --txt-color-writegeneral: #555;
  --txt-color-general: #555;
  --border-color-general: #DAA520;

  --txt-color-general-e: #555;
  --bck-grnd-color-general: #D3D3D3;
  --bck-grnd-color-general-hover: #cfc0c8;
  --bck-grnd-color-table: #F2F2F2;
}