/* =====================================================
   COMPONENTS.CSS
   -----------------------------------------------------
   Enthält wiederverwendbare UI-Bausteine:
   - Buttons
   - Cards
   - Formulare
   - Diverses
   -----------------------------------------------------
   Jede Komponente ist in sich abgeschlossen.
   Naming-Konvention: BEM (Block__Element--Modifier)
===================================================== */


/* =====================================================
   1. BUTTONS
===================================================== */

button {
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-size: 1rem;
  transition: 0.2s ease;
}

button:hover {
  color: var(--color-surface);
  background: var(--color-hoveronlinks);
}

.btn--color-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--color-primary:hover {
  background: var(--color-primary-hover);
}


/* =====================================================
   2. CARD
===================================================== */

.card {
  background: var(--color-surface);
  padding: var(--spacing-lg);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.card__title {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-sm);
}

.card__content {
  color: var(--color-muted);
}


/* =====================================================
   3. FORM
===================================================== */

.form-group {
  margin-bottom: var(--spacing-md);
}

input,
select {
    vertical-align: middle;
}

.input {
  width: 100%;
  padding: var(--spacing-sm);
  border-radius: var(--radius);
  border: 1px solid #ddd;
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
}


/* =====================================================
   4. DIVERSE
===================================================== */

mark {
	background-color: #ff9;
	color: #000;
	font-style: italic;
	font-weight: bold;
}

del {
	text-decoration: line-through;
}

abbr[title],
dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #cccccc;
	margin: 1em 0;
	padding: 0;
}

.block {
	text-align: justify;
}
.italic {
	font-style: italic;
}
.noliststyle {
	list-style-type: none;
}
.underline {
	text-decoration: underline;
}
.pointer:hover {
	cursor: pointer;
}

/* =====================================================
   4. stylish-quote
===================================================== */

.stylish-quote {
    position: relative;
    max-width: 600px;
    margin: 20px auto;
    padding: 40px 50px;
    font-size: clamp(0.8rem, calc(1rem + 1.2vw), 1.5rem) ; /*clamp(min, preferred, max)*/
    line-height: 1.6;
    font-style: italic;
    color: #333;
    text-align: center;
}

/* grosse Hintergrundquotes */
.stylish-quote::before,
.stylish-quote::after {
    position: absolute;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15rem;        /* feste Größe → kein Layoutspringen */
    color: var(--color-text);
    opacity: 0.06;
    line-height: 1;
    pointer-events: none;
    z-index: -1;
}

/* Anfangsquote links unten */
.stylish-quote::before {
    content: "„";
    left: 0;
    bottom: 0;
    /* transform: translate(-30%, 40%); */
}

/* Endquote rechts oben */
.stylish-quote::after {
    content: "“";
    right: 0;
    top: 0;
    /*
     transform: translate(30%, -40%); */
}
.stylish-quote {
    isolation: isolate;
}


/* alte variante */
.stylish-quote2 {
    position: relative;          /* für das absolute Anführungszeichen */
    max-width: 600px;            /* maximale Breite */
    margin: 40px auto;           /* zentriert auf der Seite */
    padding: 20px 30px;          /* Innenabstand */
    font-size: 1.5rem;            /* größere Schrift */
    line-height: 1.6;
    font-style: italic;           /* kursiv für Zitat-Stil */
    color: #333;                  /* dunkle Schriftfarbe */
    /*background: #f9f9f9;          /* hellgrauer Hintergrund */
    /*border-left: 5px solid var(--color-primary); /* optional: farblicher Akzent */
    /* border-radius: 10px; */
    text-align: center;           /* Text zentrieren */
}

/* Großes Anführungszeichen oben rechts */
.stylish-quote2::before {
    content: "“";                 /* typografisches Anführungszeichen */
    position: absolute;
    top: -20px;
    right: 15px;
    font-size: 4em;               /* sehr groß */
    color: var(--color-primary);  /* gleiche Farbe wie Akzentlinie */
    font-family: Georgia, serif;  /* elegantes Schriftbild */
    line-height: 1;
}
/* Großes Anführungszeichen unten links */
.stylish-quote2::after {
    content: "”";                 /* schließendes Anführungszeichen */
    position: absolute;
    bottom: -20px;
    left: 15px;
    font-size: 4em;
    color: var(--color-primary);
    font-family: Georgia, serif;
    line-height: 1;
}