/* =======================
   Reset & Base
======================= */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #111;
  background: #fff;
}

.card-contact .contact p {
	margin: 0 0 5px 0;
}

.card-status, small {user-select: none;}

/* Accessible, scalable type */
:root{
  --max-page: 1280px;

  /* Card layout */
  --card-gap: 18px;

  /* Colors with WCAG AA contrast for white text */
  --magenta: #bf00bf; /* passes 4.5:1 on white text */
  --card-dark-top: #111;
  --card-dark-bottom: #444;

  /* Sizing */
  --content-min-h-desktop: 900px;

  /* Header height (fixed) – adjust if needed to the logo’s native height */
  --hero-h: 120px;
}

/* Focus visibility */
:where(a, button, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

/* Skip link */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: #005fcc;
  color: #fff;
  padding: .6rem 1rem;
  border-radius: .25rem;
  z-index: 1000;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

/* Page wrapper */
.page{
  width: 100%;
  max-width: var(--max-page);
  margin-inline: auto;
}

/* =======================
   Header image (fixed size, centered, no gap)
======================= */
.hero{
  margin: 0;                 /* no gap above */
  height: var(--hero-h);     /* fixed header height */
  display: flex;
  align-items: center;
  justify-content: center;   /* center the image */
  overflow: hidden;          /* crop overflow (no stretching) */
}
.hero img{
  display: block;
  height: var(--hero-h);     /* scale by height only (keeps aspect) */
  width: auto;
  max-width: none;           /* allow cropping if wider than viewport */
  margin: 0;                 /* ensure no extra space */
}

/* =======================
   Content background + overlay
======================= */
.content{
  /* Background image visible & “glued” to header (no margins anywhere) */
  margin: 0;
  background: url("../img/content_bg.jpg") center top / cover no-repeat; /* fixed path */
  min-height: var(--content-min-h-desktop);
  position: relative;
}

/* Centers the two cards */
.overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--card-gap);
  padding: 16px;
  text-align: center;
}

/* =======================
   Cards (Boxes)
======================= */
.card{
  color: #fff;
  padding: 1.25rem;
  border-radius: 6px;
  width: 420px;           /* desktop default */
  max-width: 100%;
}

/* “Neue Seite im Aufbau” – brand but accessible */
.card-status{
  background: linear-gradient(180deg, var(--magenta) 0%, #000 100%);
}
.card-status h1{
  margin: 0;
  font-size: clamp(1.25rem, 1.6vw + .8rem, 1.75rem);
}

/* Contact card */
.card-contact{
  background: linear-gradient(180deg, var(--card-dark-top) 0%, var(--card-dark-bottom) 100%);
}
.card-contact h2{
  margin: 0 0 .5rem;
  font-size: clamp(1.125rem, 1.4vw + .7rem, 1.5rem);
}
.card-contact .contact{
  font-style: normal; /* <address> default is italic */
  margin: 0;
}

.card-contact a{
  color: #fff;           /* keep contrast */
  text-decoration: underline;
}
.card-contact a:hover,
.card-contact a:focus-visible{
  color: #f050f0;
  transition: 0.3s;
}

/* Ensure no accidental gaps between sections */
section, header, main { margin: 0; }

/* Images default */
img { max-width: 100%; height: auto; }

/* =======================
   Feathered image edges (mask)
   - Add class "fade-top-bottom", "fade-sides" or "fade-edges" to any <img>
======================= */
/* Fade ALL sides (left+right+top+bottom) */
img.fade-all{
  --fade: 24px; /* adjust softness */
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0,
      #000 var(--fade),
      #000 calc(100% - var(--fade)),
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0,
      #000 var(--fade),
      #000 calc(100% - var(--fade)),
      transparent 100%);
  mask-image:
    linear-gradient(to right,
      transparent 0,
      #000 var(--fade),
      #000 calc(100% - var(--fade)),
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0,
      #000 var(--fade),
      #000 calc(100% - var(--fade)),
      transparent 100%);
  /* intersect the two masks so all edges fade */
  -webkit-mask-composite: source-over, destination-in;
  mask-composite: add, intersect;
  -webkit-mask-mode: alpha;
  mask-mode: alpha;
}

/* Header-Kanten weich ausblenden (Overlay → weiß) */
.hero{ 
  position: relative; /* nötig für das Pseudo-Element */
}

.hero::after, .content::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Stärke/Weite des Fades anpassen */
  --fade: 28px;

  /* vier weiße Verläufe – oben/unten/links/rechts */
  background:
    linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0)) top,
    linear-gradient(to top,    rgba(255,255,255,0), rgba(255,255,255,0)) bottom,
    linear-gradient(to right,  #fff, rgba(255,255,255,0)) left,
    linear-gradient(to left,   #fff, rgba(255,255,255,0)) right;
  background-repeat: no-repeat;
  background-size:
    100% var(--fade),  /* oben  */
    100% var(--fade),  /* unten */
    var(--fade) 100%,  /* links */
    var(--fade) 100%;  /* rechts */
}

/* =======================
   Responsive (mobile/tablet)
======================= */
@media (max-width: 992px){
  /* NOTE: no padding on .hero -> no top gap */
  .content{ min-height: 100vh; } /* background tall enough on mobile */

	:root { --hero-h: 95px; }

  /* Boxes: almost full width, centered with small margins */
  .card{
    width: min(52rem, calc(100% - 2rem)); /* small side margin */
    padding: clamp(1rem, 3.5vw, 1.75rem);
  }

  /* Larger, readable text on small screens */
  .card-status h1{
    font-size: clamp(1.375rem, 5.5vw, 2rem);
  }
  .card-contact h2{
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }
  .card-contact .contact{
    font-size: clamp(1rem, 4.2vw, 1.125rem);
  }
  
  .hero::after, .content::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Stärke/Weite des Fades anpassen */
  --fade: 0px;

  /* vier weiße Verläufe – oben/unten/links/rechts */
  background:
    linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0)) top,
    linear-gradient(to top,    rgba(255,255,255,0), rgba(255,255,255,0)) bottom,
    linear-gradient(to right,  #fff, rgba(255,255,255,0)) left,
    linear-gradient(to left,   #fff, rgba(255,255,255,0)) right;
  background-repeat: no-repeat;
  background-size:
    100% var(--fade),  /* oben  */
    100% var(--fade),  /* unten */
    var(--fade) 100%,  /* links */
    var(--fade) 100%;  /* rechts */
}

  
}

/* Very small phones */
@media (max-width: 420px){
  .overlay{ gap: 14px; }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { animation: none !important; transition: none !important; }
}