/*
 * IGLUSCY – Utility CSS
 * Einbinden im Layout: <link rel="stylesheet" href="/public/css/igluscy.css">
 *
 * Klassen-Übersicht:
 *   Layout:     .container .container-sm .section .section-sm .section-lg
 *   Grid:       .grid .grid-2 .grid-3 .grid-4 .grid-auto .grid-auto-sm
 *   Flex:       .flex .flex-center .flex-between .flex-col .flex-wrap
 *   Abstände:   .gap-sm .gap-md .gap-lg .mt-1…4 .mb-1…4 .py-1…4 .px-1…4
 *   Kacheln:    .tile .tile-icon .tile-title .tile-text .tile-badge .tile-link
 *   Buttons:    .btn .btn-primary .btn-outline .btn-white .btn-dark .btn-sm .btn-lg .btn-pill
 *   Schrift:    .text-center .text-right .text-sm .text-lg .text-xl .font-bold .font-black
 *               .text-muted .text-green .text-dark
 *   Farben:     .bg-green .bg-pale .bg-gray .bg-white .bg-dark
 *   Sonstiges:  .badge .badge-green .badge-gray .badge-blue
 *               .section-title .section-subtitle .divider .card .rounded .shadow
 */

/* ── Variablen ────────────────────────────────── */
:root {
	--green:        #2e7d32;
	--ig-orange:    #f5a000;
	--green-mid:    #388e3c;
	--green-light:  #4caf50;
	--green-pale:   #e8f5e9;
	--white:        #ffffff;
	--gray:         #f5f7f5;
	--text:         #1a1a1a;
	--text-mid:     #555555;
	--text-light:   #888888;
	--border:       #c8e6c9;
	--radius:       10px;
	--radius-sm:    6px;
	--radius-lg:    14px;
}

/* ── Container ────────────────────────────────── */
.container    { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.container-sm { max-width: 720px;  margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }
.container-md { max-width: 960px;  margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); }

/* ── Section Padding ──────────────────────────── */
.section    { padding: 4rem clamp(1rem, 4vw, 2rem); }
.section-sm { padding: 2.5rem clamp(1rem, 4vw, 2rem); }
.section-lg { padding: 6rem clamp(1rem, 4vw, 2rem); }

/* ── Grid ─────────────────────────────────────── */
.grid      { display: grid; gap: 1.25rem; }
.grid-2    { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.grid-3    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.grid-4    { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
/* Automatisch so viele Spalten wie reinpassen – für Kacheln empfohlen */
.grid-auto    { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.25rem; }
.grid-auto-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.grid-auto-lg { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }

/* ── Flex ─────────────────────────────────────── */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-end     { display: flex; align-items: center; justify-content: flex-end; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }

/* ── Abstände (Gap) ───────────────────────────── */
.gap-xs { gap: .5rem; }
.gap-sm { gap: .75rem; }
.gap-md { gap: 1.25rem; }
.gap-lg { gap: 2rem; }
.gap-xl { gap: 3rem; }

/* ── Margin Top ───────────────────────────────── */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }
.mt-6 { margin-top: 4rem; }

/* ── Margin Bottom ────────────────────────────── */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }
.mb-6 { margin-bottom: 4rem; }

/* ── Padding Y (oben & unten) ─────────────────── */
.py-1 { padding-top: .5rem;  padding-bottom: .5rem; }
.py-2 { padding-top: 1rem;   padding-bottom: 1rem; }
.py-3 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-4 { padding-top: 2rem;   padding-bottom: 2rem; }
.py-5 { padding-top: 3rem;   padding-bottom: 3rem; }
.py-6 { padding-top: 4rem;   padding-bottom: 4rem; }

/* ── Padding X (links & rechts) ───────────────── */
.px-1 { padding-left: .5rem;  padding-right: .5rem; }
.px-2 { padding-left: 1rem;   padding-right: 1rem; }
.px-3 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-4 { padding-left: 2rem;   padding-right: 2rem; }

/* ── Kacheln (Tiles) ──────────────────────────── */
.tile {
	display: block;
	background: var(--white);
	border: 1.5px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.6rem;
	text-decoration: none;
	color: var(--text);
	transition: border-color .2s, transform .18s, box-shadow .18s;
}
.tile:hover {
	border-color: var(--green-light);
	transform: translateY(-2px);
	box-shadow: 0 6px 22px rgba(46,125,50,.12);
}
a.tile { cursor: pointer; }
.tile-icon {
	width: 46px; height: 46px;
	border-radius: var(--radius);
	background: var(--green-pale);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 1rem; font-size: 1.35rem;
}
.tile-title  { font-size: var(--fs-h2); font-weight: 700; line-height: 1.3; margin: 0 0 .5rem; }
.tile-text   { font-size: .86rem; color: var(--text-mid); line-height: 1.6; margin: 0; }
.tile-badge  {
	display: inline-block; font-size: .72rem; font-weight: 600;
	background: var(--green-pale); color: var(--green);
	border-radius: 20px; padding: .15rem .55rem; margin-top: .75rem;
}
.tile-link {
	display: inline-flex; align-items: center; gap: .3rem;
	font-size: .85rem; font-weight: 700; color: var(--green);
	margin-top: .75rem; text-decoration: none;
}
/* Variante: dunklere Kachel (z.B. Sterben-Seite) */
.tile-slate {
	border-color: #cfd8dc;
}
.tile-slate:hover {
	border-color: #90a4ae;
	box-shadow: 0 6px 22px rgba(84,110,122,.12);
}
.tile-slate .tile-icon   { background: #eceff1; }
.tile-slate .tile-badge  { background: #eceff1; color: #546e7a; }
.tile-slate .tile-link   { color: #546e7a; }

/* ── Card (allgemein, kein Hover-Effekt) ──────── */
.card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.75rem;
}
.card-sm { padding: 1.25rem; }
.card-lg { padding: 2.5rem; }

/* ── Buttons ──────────────────────────────────── */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
	padding: .7rem 1.75rem;
	border-radius: var(--radius);
	font-family: inherit; font-size: .95rem; font-weight: 600;
	text-decoration: none; cursor: pointer;
	border: 2px solid transparent;
	transition: all .15s;
	white-space: nowrap;
}
.btn-primary  { background: var(--green);      color: #fff;              border-color: var(--green); }
.btn-primary:hover  { background: var(--green-mid); border-color: var(--green-mid); }
.btn-outline  { background: transparent;       color: var(--green);      border-color: var(--green); }
.btn-outline:hover  { background: var(--green-pale); }
.btn-white    { background: #fff;              color: var(--ig-orange); border-color: #fff; }
.btn-white:hover    { background: var(--green-pale); border-color: var(--green-pale); }
.btn-dark     { background: var(--ig-orange); color: #fff;              border-color: var(--ig-orange); }
.btn-dark:hover     { background: var(--green); border-color: var(--green); }
.btn-ghost    { background: transparent;       color: var(--text);       border-color: var(--border); }
.btn-ghost:hover    { background: var(--gray); border-color: #bbb; }
.btn-sm  { padding: .45rem 1.1rem; font-size: .85rem; }
.btn-lg  { padding: .95rem 2.25rem; font-size: 1.05rem; }
.btn-pill { border-radius: 50px; }
.btn-full { width: 100%; }

/* ── Badges / Labels ──────────────────────────── */
.badge {
	display: inline-block; font-size: .72rem; font-weight: 600;
	border-radius: 20px; padding: .2rem .65rem;
}
.badge-green { background: var(--green-pale); color: var(--green); }
.badge-gray  { background: #eceff1; color: #546e7a; }
.badge-blue  { background: #e3f2fd; color: #1565c0; }
.badge-red   { background: #fce4ec; color: #c62828; }
.badge-yellow{ background: #fffde7; color: #f57f17; }

/* ── Seiten-Überschriften ─────────────────────── */
.section-title {
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 800; color: var(--ig-orange); margin: 0 0 .5rem;
}
.section-title-center { text-align: center; }
.section-subtitle {
	font-size: .95rem; color: var(--text-mid);
	max-width: 600px; line-height: 1.6; margin: 0 0 2.5rem;
}
.section-subtitle-center { text-align: center; margin-left: auto; margin-right: auto; }

/* ── Typographie ──────────────────────────────── */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-xs      { font-size: .75rem; }
.text-sm      { font-size: .875rem; }
.text-base    { font-size: 1rem; }
.text-lg      { font-size: 1.125rem; }
.text-xl      { font-size: 1.3rem; }
.text-2xl     { font-size: 1.6rem; }
.font-normal  { font-weight: 400; }
.font-medium  { font-weight: 500; }
.font-bold    { font-weight: 700; }
.font-black   { font-weight: 900; }
.text-muted   { color: var(--text-mid); }
.text-light   { color: var(--text-light); }
.text-green   { color: var(--green); }
.text-dark    { color: var(--text); }
.text-white   { color: #fff; }
.leading-tight  { line-height: 1.25; }
.leading-normal { line-height: 1.6; }
.leading-loose  { line-height: 1.9; }

/* ── Hintergrundfarben ────────────────────────── */
.bg-green { background: var(--green); color: #fff; }
.bg-dark  { background: var(--ig-orange); color: #fff; }
.bg-pale  { background: var(--green-pale); }
.bg-gray  { background: var(--gray); }
.bg-white { background: var(--white); }

/* ── Sonstiges ────────────────────────────────── */
.rounded    { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: 9999px; }
.shadow-sm  { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.shadow     { box-shadow: 0 4px 18px rgba(0,0,0,.1); }
.shadow-lg  { box-shadow: 0 8px 36px rgba(0,0,0,.14); }
.divider    { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.w-full     { width: 100%; }
.hidden     { display: none; }
.overflow-hidden { overflow: hidden; }

/* ── Responsive ───────────────────────────────── */
@media (max-width: 1024px) {
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.hide-tablet { display: none; }
}
@media (max-width: 768px) {
	.grid-2,
	.grid-3,
	.grid-4  { grid-template-columns: 1fr; }
	.section    { padding-top: 2.5rem;  padding-bottom: 2.5rem; }
	.section-sm { padding-top: 1.75rem; padding-bottom: 1.75rem; }
	.section-lg { padding-top: 3.5rem;  padding-bottom: 3.5rem; }
	.hide-mobile { display: none; }
	.show-mobile { display: block; }
}
@media (max-width: 480px) {
	.grid-auto    { grid-template-columns: 1fr; }
	.grid-auto-sm { grid-template-columns: repeat(2, 1fr); }
	.btn-lg { padding: .8rem 1.75rem; }
}