/* 1a. Containers 




/* 1b. Colors */




/* 1c. Typography */


























/* 1d. Buttons */













/* 1e. Forms */









































/* 1f. Tables */













/* 1g. Website header */








/* 1h. Website footer */





@layer base {
				:root {
					/* Core Colors - Professional, accessible, modern */
					--background: 0 0% 98%;
					--foreground: 220 13% 13%;

					/* Cards & Surfaces */
					--card: 0 0% 100%;
					--card-foreground: 220 13% 13%;

					/* Interactive Elements */
					--popover: 0 0% 100%;
					--popover-foreground: 220 13% 13%;

					/* Primary Brand - Professional Blue */
					--primary: 221 83% 53%;
					--primary-foreground: 0 0% 100%;
					--primary-hover: 217 91% 55%;
					--primary-light: 217 91% 95%;
					/* Ergaenzt fuer die Farb-Tokenisierung: Werte = bisherige Ist-Farben,
					   damit die Optik vor dem Umbranden unveraendert bleibt. */
					--foreground-soft: 217 19% 27%;
					--info: 199 95% 74%;
					--info-foreground: 220 13% 13%;
					--info-light: 177 60% 76%;

					/* Secondary Actions */
					--secondary: 220 13% 95%;
					--secondary-foreground: 220 13% 13%;
					--secondary-hover: 220 13% 90%;

					/* Muted Elements */
					--muted: 220 13% 95%;
					--muted-foreground: 215 14% 34%;

					/* Accent - Purple */
					--accent: 271 50% 32%;
					--accent-foreground: 0 0% 100%;
					--accent-light: 271 50% 95%;

					/* Status Colors */
					--success: 271 50% 32%;
					--success-foreground: 0 0% 100%;
					--success-light: 271 50% 95%;

					--warning: 38 92% 50%;
					--warning-foreground: 0 0% 100%;
					--warning-light: 38 92% 95%;

					--destructive: 0 84% 60%;
					--destructive-foreground: 0 0% 100%;
					--destructive-light: 0 84% 95%;

					/* Borders & Inputs */
					--border: 220 13% 91%;
					--input: 220 13% 91%;
					--ring: 217 91% 60%;

					/* Layout */
					--radius: 0.75rem;
					--radius-sm: 0.5rem;
					--radius-lg: 1rem;

					/* Gradients */
					--gradient-hero: linear-gradient(135deg, hsl(217 91% 60%), hsl(217 91% 70%));
					--gradient-card: linear-gradient(145deg, hsl(0 0% 100%), hsl(220 13% 99%));
					--gradient-accent: linear-gradient(135deg, hsl(271 50% 32%), hsl(271 50% 42%));

					/* Shadows */
					--shadow-sm: 0 1px 2px 0 hsl(220 13% 13% / 0.05);
					--shadow: 0 1px 3px 0 hsl(220 13% 13% / 0.1), 0 1px 2px -1px hsl(220 13% 13% / 0.1);
					--shadow-md: 0 4px 6px -1px hsl(220 13% 13% / 0.1), 0 2px 4px -2px hsl(220 13% 13% / 0.1);
					--shadow-lg: 0 10px 15px -3px hsl(220 13% 13% / 0.1), 0 4px 6px -4px hsl(220 13% 13% / 0.1);
					--shadow-xl: 0 20px 25px -5px hsl(220 13% 13% / 0.1), 0 8px 10px -6px hsl(220 13% 13% / 0.1);

					/* Animations */
					--transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
					--transition-slow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

					--sidebar-background: 0 0% 98%;

					--sidebar-foreground: 240 5.3% 26.1%;

					--sidebar-primary: 240 5.9% 10%;

					--sidebar-primary-foreground: 0 0% 98%;

					--sidebar-accent: 240 4.8% 95.9%;

					--sidebar-accent-foreground: 240 5.9% 10%;

					--sidebar-border: 220 13% 91%;

					--sidebar-ring: 217.2 91.2% 59.8%;
				}

				.dark {
					--background: 220 13% 13%;
					--foreground: 0 0% 98%;

					--card: 220 13% 16%;
					--card-foreground: 0 0% 98%;

					--popover: 220 13% 16%;
					--popover-foreground: 0 0% 98%;

					--primary: 221 83% 53%;
					--primary-foreground: 0 0% 100%;
					--primary-hover: 217 91% 55%;
					--primary-light: 217 91% 25%;
					/* Ergaenzt fuer die Farb-Tokenisierung: Werte = bisherige Ist-Farben,
					   damit die Optik vor dem Umbranden unveraendert bleibt. */
					--foreground-soft: 217 19% 27%;
					--info: 199 95% 74%;
					--info-foreground: 220 13% 13%;
					--info-light: 177 60% 76%;

					--secondary: 220 13% 20%;
					--secondary-foreground: 0 0% 98%;
					--secondary-hover: 220 13% 25%;

					--muted: 220 13% 20%;
					--muted-foreground: 220 9% 65%;

					--accent: 271 50% 42%;
					--accent-foreground: 0 0% 100%;
					--accent-light: 271 50% 25%;

					--success: 271 50% 42%;
					--success-foreground: 0 0% 100%;
					--success-light: 271 50% 25%;

					--warning: 38 92% 60%;
					--warning-foreground: 0 0% 100%;
					--warning-light: 38 92% 25%;

					--destructive: 0 84% 70%;
					--destructive-foreground: 0 0% 100%;
					--destructive-light: 0 84% 25%;

					--border: 220 13% 25%;
					--input: 220 13% 25%;
					--ring: 217 91% 60%;

					/* Dark mode gradients */
					--gradient-hero: linear-gradient(135deg, hsl(217 91% 50%), hsl(217 91% 60%));
					--gradient-card: linear-gradient(145deg, hsl(220 13% 16%), hsl(220 13% 18%));
					--gradient-accent: linear-gradient(135deg, hsl(271 50% 32%), hsl(271 50% 42%));

					--sidebar-background: 220 13% 13%;
					--sidebar-foreground: 0 0% 98%;
					--sidebar-primary: 217 91% 60%;
					--sidebar-primary-foreground: 0 0% 100%;
					--sidebar-accent: 220 13% 20%;
					--sidebar-accent-foreground: 0 0% 98%;
					--sidebar-border: 220 13% 25%;
					--sidebar-ring: 217 91% 60%;
				}
			}



/* -------------------------------------------------------------
 Custom CSS - Copy, replace colors and remove comment section 
 ---------------------------------------------------------------*/


/* 
@layer base {
  :root {

    --primary: 2 65% 55%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 2 65% 50%;
    --primary-light: 2 65% 95%;
    /* Ergaenzt fuer die Farb-Tokenisierung: Werte = bisherige Ist-Farben,
       damit die Optik vor dem Umbranden unveraendert bleibt. */
    --foreground-soft: 217 19% 27%;
    --info: 199 95% 74%;
    --info-foreground: 220 13% 13%;
    --info-light: 177 60% 76%;


    --secondary: 142 70% 49%;
    --secondary-foreground: 0 0% 100%;
    --secondary-hover: 142 70% 44%;
    --secondary-light: 142 70% 95%;


    --accent: 0 0% 27%;
    --accent-foreground: 0 0% 100%;
    --accent-light: 0 0% 90%;


    --ring: 2 65% 55%;


    --gradient-hero: linear-gradient(135deg, hsl(2 65% 55%), hsl(2 65% 65%));
  }

  .dark {
    --primary: 2 65% 55%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 2 65% 50%;
    --primary-light: 2 65% 25%;
    /* Ergaenzt fuer die Farb-Tokenisierung: Werte = bisherige Ist-Farben,
       damit die Optik vor dem Umbranden unveraendert bleibt. */
    --foreground-soft: 217 19% 27%;
    --info: 199 95% 74%;
    --info-foreground: 220 13% 13%;
    --info-light: 177 60% 76%;

    --secondary: 142 70% 49%;
    --secondary-foreground: 0 0% 100%;
    --secondary-hover: 142 70% 44%;
    --secondary-light: 142 70% 25%;


    --accent: 0 0% 27%;
    --accent-foreground: 0 0% 100%;
    --accent-light: 0 0% 20%;

    --ring: 2 65% 55%;
  }
}*/



/* ============================================================
   THEME-EINSTELLUNGEN ANWENDEN
   Die Bloecke oben definieren die Farben als feste HSL-Tripel.
   Damit die Einstellungen unter "Design > Theme" wirken, werden
   sie hier zuletzt gesetzt und ueberschreiben die Vorgaben.
   Alle Module nutzen hsl(var(--token)), deshalb muss der Hex-Wert
   aus dem Theme-Feld in "H S% L%" umgerechnet werden.
   ============================================================ */

/* Schriftart der Ueberschriften aus den Theme-Einstellungen.
   Farben und Grundschrift werden direkt in css/tailwind-static.css
   aus den Theme-Feldern gesetzt - dort werden die Tokens definiert,
   ein Override von aussen setzt sich gegen @layer theme nicht durch.
   ACHTUNG: Beim Neukompilieren von tailwind-static.css muessen die
   HubL-Ausdruecke fuer --font-sans, --color-primary, --color-ring und
   --color-accent wieder eingesetzt werden. */

body h1, body h2, body h3, body h4, body h5, body h6,
.hs_cos_wrapper h1, .hs_cos_wrapper h2, .hs_cos_wrapper h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
}


/* Blog: Beitragstext (Editor-Inhalte) und Autor-Avatar-Fallback */
.blog_post_body h2{padding:6px 0;margin:1.6em 0 .4em;font-size:34px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:hsl(var(--foreground))}
.blog_post_body h3,.blog_post_body h4{margin:1.4em 0 .3em}
.blog_post_body p{margin:0 0 1.1em;line-height:1.7}
.blog_post_body ul,.blog_post_body ol{margin:0 0 1.2em 1.4em;padding:0;line-height:1.7}
.blog_post_body ul{list-style:disc}.blog_post_body ol{list-style:decimal}
.blog_post_body li{margin:.25em 0}
.blog_post_body a{color:hsl(var(--primary));text-decoration:underline;text-underline-offset:2px}
.blog_post_body blockquote{margin:1.5em 0;padding:.75em 1.25em;border-left:4px solid hsl(var(--primary));background:hsl(var(--muted));border-radius:.5rem;font-style:italic}
.blog_post_body img{max-width:100%;height:auto;border-radius:.75rem;margin:1.5em 0}
.blog_post_body hr{margin:2em 0;border:0;border-top:1px solid hsl(var(--border))}
.cx-avatar-fallback{display:inline-flex;width:2.5rem;height:2.5rem;border-radius:9999px;background:hsl(var(--primary));color:#fff;align-items:center;justify-content:center;font-weight:600;font-size:1rem;line-height:1}