@charset "UTF-8";
/***!  /media/templates/site/cassiopeia/css/user.css?352fbe  !***/

/* Untermenüs breiter machen */
.container-header .mod-menu .metismenu ul {
    min-width: 250px; /* Passen Sie den Wert hier nach Bedarf an */
}

/* Erzwingt einen automatischen Zeilenumbruch bei sehr langen Menütiteln */
.container-header .mod-menu .metismenu ul li a {
    white-space: normal;
    height: auto;
}

.container-header .site-description {
  color: #fff;
  white-space: normal;
  font-size: 2rem;
  font-weight: bold;
}

.site-grid {
   grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,23rem)) [main-end] minmax(0,1fr) [full-end];
}

.container-nav {
      max-width: 1600px;
      margin-left: auto;
      margin-right: auto;
    }

.tbody, .td, .tfoot, .th, .thead, .tr {
    border-width: 1 solid black;
}

.btn {
	background-color:#b7c9e8;
	border-radius:21px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#000000;
	font-family:Arial;
	font-size:11px;
	padding:2px 10px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
}
.btn:hover {
	background-color:#476e9e;
    color:#ffffff;
}
.btn:active {
	position:relative;
	top:1px;
}

/* ================================
   ab hier CSS von ChatGPT aus Seitenoptimierungs-Chat
================================ */

/* ================================
   1. GLOBAL BASE (Grundschrift)
================================ */
body {
  font-size: 1rem;
  line-height: 1.6;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #1a1a1a;
}

/* ================================
   2. H1 – ARTIKEL / SEITENTITEL
   (SEO + KI = wichtigste Überschrift)
================================ */
h1 {
  font-size: clamp(1.6rem, 2vw, 2.3rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.8rem 0;
}

/* ================================
   3. H2 – HAUPTABSCHNITTE
================================ */
h2 {
  font-size: clamp(1.35rem, 1.6vw, 1.7rem);
  line-height: 1.3;
  font-weight: 600;
  margin: 1.6rem 0 0.6rem;
}

/* ================================
   4. H3 – UNTERABSCHNITTE
================================ */
h3 {
  font-size: 1.2rem;
  line-height: 1.35;
  font-weight: 600;
  margin: 1.2rem 0 0.4rem;
}

/* ================================
   5. H4 – DETAIL / TECHNISCHE EBENE
================================ */
h4 {
  font-size: 1.05rem;
  line-height: 1.4;
  font-weight: 600;
  margin: 1rem 0 0.3rem;
}

/* ================================
   6. PARAGRAPHEN
================================ */
p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 1rem 0;
}

/* ================================
   7. LISTEN (SEO + KI wichtig!)
================================ */
ul, ol {
  margin: 0 0 1rem 1.2rem;
  padding: 0;
}

li {
  margin-bottom: 0.4rem;
  line-height: 1.6;
}

/* ================================
   8. LINKS
================================ */
a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* ================================
   9. CLUSTER-OPTIMIERUNG (OPTIONAL)
   Nur Artikelbereich, nicht Module
================================ */
.com-content-article h1 {
  max-width: 900px;
}

.com-content-article p,
.com-content-article h2,
.com-content-article h3 {
  max-width: 900px;
}

/* =========================
   GLOBAL TYPOGRAPHY
========================= */

body {
  font-size: 1rem;
  line-height: 1.6;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* =========================
   H1 = ARTIKEL / KATEGORIE
========================= */
h1 {
  font-size: clamp(1.6rem, 2vw, 2.3rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

/* =========================
   H2 = BLOG LISTEN (WICHTIG!)
========================= */
.article-title {
  font-size: clamp(1.25rem, 1.5vw, 1.6rem);
  font-weight: 600;
  line-height: 1.3;
}

/* =========================
   H2/H3 IN ARTIKELN
========================= */
h2 {
  font-size: 1.4rem;
  margin-top: 1.5rem;
}

h3 {
  font-size: 1.15rem;
  margin-top: 1rem;
}

/* =========================
   VISUELLE HIERARCHIE KLARHEIT
========================= */
.com-content-article h1 {
  font-size: clamp(1.6rem, 2vw, 2.3rem);
}