@charset "UTF-8";
/* CSS Document */

/* #003726; /* dunkelgruen */

/* #49b640; /* akzentgruen */

/* #000000; /* schwarz */

/* ==========================================================
   Baustellen-Seite – Stylesheet
   ========================================================== */

/* ---------- Schriften ---------- */
@font-face {
  font-family: "Sora";
  src: url("fonts/Sora-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Sora";
  src: url("fonts/Sora-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- Variablen ---------- */
:root {
  --color-text: #000000;
  --color-muted: #5b6168;
  --color-accent: #33872d;      /* abgedunkeltes Akzentgrün, Kontrast 4,5:1 auf Weiß */
  --color-card: #ffffff;
  --overlay: rgba(0, 0, 0, 0.35);

  --font-base: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-weight-regular: 400;   /* Fließtext */
  --font-weight-medium: 500;    /* Überschriften, strong */

  --card-max-width: 34rem;      /* ca. 544 px */
  --card-max-width-wide: 50rem; /* ca. 800 px – Impressum, Datenschutz */
  --radius: 0px;
  --corner-cut: 2rem;           /* Größe der schrägen Ecke an der Kachel */
  --space: clamp(1rem, 4vw, 2rem);
}

/* ---------- Reset / Basis ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  color: var(--color-text);
	background-color: #003726;
}

h1, h2, h3, h4, h5, h6,
strong,
b {
  font-weight: var(--font-weight-medium);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ---------- Seitenlayout ---------- */
.page {
  min-height: 100vh;
  min-height: 100svh;            /* berücksichtigt mobile Browserleisten */
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(var(--overlay), var(--overlay)),
    url("images/arbeitsschutz-vemmer-hintergrundbild_660623161.jpg") center / cover no-repeat;
}

/* Auf Desktop: Bild bleibt beim Scrollen stehen */
@media (min-width: 992px) {
  .page {
    background-attachment: fixed;
  }
}

.page-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space);
}

/* Seite exakt so hoch wie das Browserfenster – gescrollt wird in der Kachel */
.page-fixed {
  height: 100vh;
  height: 100svh;
}

.page-fixed .page-main {
  min-height: 0;                /* erlaubt dem Inhalt, kleiner als sein Text zu werden */
}

/* ---------- Header ---------- */
.site-header {
  display: flex;
  justify-content: center;
  padding: var(--space) var(--space) 0;
}

.site-header-logo {
  width: clamp(140px, 30vw, 320px);
}

/* ---------- Kachel ---------- */
.info-card {
  width: 100%;
  max-width: var(--card-max-width);
  background: var(--color-card);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 5vw, 2.75rem);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.25);
  text-align: left;
	border-bottom: 20px solid #49b640;

  /* Test: schräge Ecke unten rechts (ohne Unterstützung: abgerundet) */
  /*border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;	
  corner-shape: bevel;*/
}

/* Breitere Kachel für längere Texte */
.info-card-wide {
  max-width: var(--card-max-width-wide);
}

.info-card-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.4rem, 4vw, 1.85rem);
  line-height: 1.25;
}

.info-card-text {
  margin: 0 0 1.75rem;
  color: var(--color-text);
}

/* ---------- Kachel mit scrollbarem Inhalt (Impressum, Datenschutz) ---------- */
.info-card-scroll {
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.info-card-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain; /* Seite scrollt nicht mit, wenn Ende erreicht */
  border-top: 1px solid #e3e5e8;
  padding: 0.25rem 0.75rem 0 0; /* Abstand Text – Scrollbalken */
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) transparent;
}

.info-card-content h2,
.info-card-content h3,
.info-card-content h4 {
  margin: 1.5rem 0 0.4rem;
  line-height: 1.35;
}

.info-card-content h2 {
  margin-top: 2rem;
  font-size: 1.2rem;
}

.info-card-content h3 {
  font-size: 1.05rem;
}

.info-card-content h4 {
  margin-top: 1.1rem;
  font-size: 1rem;
}

/* Erster Inhalt: gleicher Abstand zur Trennlinie, egal ob Überschrift oder Text */
.info-card-content > :first-child {
  margin-top: 1rem;
}

/* Überschriften direkt untereinander enger setzen */
.info-card-content h2 + h3,
.info-card-content h3 + h4 {
  margin-top: 0.75rem;
}

.info-card-content p,
.info-card-content ul {
  margin: 0 0 0.75rem;
}

.info-card-content ul {
  padding-left: 1.25rem;
}

.info-card-content li {
  margin-bottom: 0.35rem;
}

.info-card-content a {
  color: var(--color-accent);
  overflow-wrap: anywhere;
}

/* Sehr niedrige Fenster (z. B. Handy quer): normal scrollen statt in der Kachel */
@media (max-height: 30rem) {
  .page-fixed {
    height: auto;
  }

  .info-card-content {
    overflow: visible;
  }
}

/* ---------- Kontakt ---------- */
.contact {
  font-style: normal;
  border-top: 1px solid #e3e5e8;
  padding-top: 1.5rem;
}

.contact p {
  margin: 0 0 0.6rem;
}

.contact-name {
  font-weight: var(--font-weight-regular);
}

.contact-label {
  display: block;
  color: var(--color-text);
}

.contact-link {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  overflow-wrap: anywhere;      /* lange E-Mail-Adressen umbrechen */
}

.contact-link:hover {
  text-decoration: underline;
}

.contact-link:focus-visible,
.info-card-content a:focus-visible,
.info-card-content:focus-visible,
.site-footer-link:focus-visible,
.site-header-logo-link:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Footer ---------- */
.site-footer {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 0 var(--space) var(--space);
}

.site-footer-link {
  color: #fff;
  font-size: 0.9rem;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.site-footer-link:hover {
  text-decoration: underline;
}