:root{
  --bg-dark: rgb(12,26,45);
  --accent: #ff9800;
  --accent-dark: rgb(30,0,100);
  --text-dark: #222;
  --white: #fff;
  --box-bg: #f9f9f9;
  --max-width: 1200px;
  --gap: 10px;
}

/* Grund-Styles */
*{box-sizing:border-box}
body{
  font-family: Arial, sans-serif;
  font-size:1rem;
  
  align-items: flex-start;
  line-height:1.3;
  margin:0;
  padding:0;
  background-color:var(--bg-dark);
  background-image: url('../../bilder/forklift-4997426_1280.jpg');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
}

/* Typografie */
h1{font-size:2.3em;font-weight:700;margin:1.2em 0 0.5em;letter-spacing:1px;line-height:1.15}
h2{font-size:1.5em;font-weight:700;margin:1.2em 0 0.5em;letter-spacing:.5px;line-height:1.15}
h3{font-size:1.17em;font-weight:700;margin:1em 0 0.5em;line-height:1.15}
p,ul,ol{font-size:1.1em;margin:1em 0}
a{color:var(--accent);text-decoration:underline;transition:color .2s}
a:hover,a:focus{color:#1a237e;background:#ffecb3;text-decoration:none}

/* Info-Box */
.info-box{
  border:2px solid var(--accent-dark);
  padding:20px;
  background-color:var(--box-bg);
  width:100%;
  margin:0 auto 1.5em;
}

/* Pop-Animation */
@keyframes pop {
  0%   { transform: scale(0.6); }
  80%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Highlight ist IMMER sichtbar */
.highlight {
  font-weight:700;
  background:rgba(30,0,100,0.07);
  border-radius:4px;
  padding:0 4px;
  display:inline-block;
}

/* Pop-Effekt wird NUR beim Sichtbarwerden aktiviert */
.highlight--visible {
  animation: pop 0.4s ease-out forwards;
  animation-delay: 0.25s; /* leichte Verzögerung */
}
@media (prefers-reduced-motion: reduce) {
  .highlight--visible {
    animation: none;
  }
}




/* Link-Hinweis */
.link-hint{display:block;margin-top:1.5em;font-size:1.1em;color:var(--accent-dark);font-weight:600;letter-spacing:.02em;text-align:right;transition:color .2s}
.arrow{font-size:1.2em;margin-left:.3em;vertical-align:middle;transition:margin-left .2s}

/* Layout: maxi (vollbreite) */
.maxi{
  display:flex;
  flex-direction:row-reverse;
  align-items:stretch;
  gap:0;
  flex-basis:100%;
  margin:0;
  padding:20px;
  background: linear-gradient(to right, #1f497d, #060f1c);
  color: #fff;
}

/* Bild im maxi-Block */
.maxi img{
  flex-shrink:0;
  max-width:260px;
  width:260px;
  height:auto;
  object-fit:contain;
  align-self:stretch;
}

/* Textbereich im maxi-Block */
.maxi-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}

/* Kalender-Style für kleine Box-Überschriften */
.box h2{
  text-align:center;
  background:var(--accent);
  color:var(--white);
  border-radius:10px 10px 0 0;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
  padding:.5em 0;
  margin:-20px 0 1em;
  border-bottom:4px solid rgb(12,26,45);
  font-weight:700;
  letter-spacing:1px;
  width:calc(100% + 40px);
  margin-left:-20px;
  margin-right:-20px;
}

.mehr-spaltig {
  max-width: min(1200px, 100%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  background-image: linear-gradient(to bottom, rgba(255,174,0,0.5), rgba(12,26,45,0.5));
  width: 100%;
}

.einspaltig {
  max-width: min(1200px, 100%);
  margin: 0 auto;
  display: block;
  width: 100%;
}

@media (min-width: 900px) {
  .mehr-spaltig,
  .einspaltig {
    max-width: min(1200px, calc(100vw - 32px));
  }
}


/* Maxi / no-box / unten */
.no-box, .maxi, .unten{
  flex-basis:100%;
  margin:0;
  padding:20px;
  box-sizing:border-box;
}
.no-box{background:none;color:var(--white)}
.unten{padding:10px;background-image:linear-gradient(rgba(12,26,45,0.5), rgba(255,174,0,0.5))}

.blau {
  padding: 10px;
  background: rgba(12,26,45,0.5);
  color: #fff;
}
.gelb {
  padding: 10px;
  background:rgba(255,174,0,0.5);
  color: #181f2a;
}

/* Box (3-spaltig) */
.box{
  flex-basis:calc(33.33% - 20px);
  margin:10px;
  border:2px solid rgb(12,26,45);
  padding:20px;
  background-color:var(--box-bg);
  border-radius:12px 12px 0 0;
  flex-grow:1;
  height:auto;
  transition:transform .18s, box-shadow .18s;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.pruefung-simulation-card {
  flex-basis: calc(100% - 20px);
}

/* Unterster Text in Boxen immer unten ausrichten */
.box .link-hint {
  margin-top: auto;
}

.download-meta {
  margin-top: 1.2em;
  color: #4c5b6f;
  font-size: .98em;
  font-weight: 700;
}

.download-missing {
  color: #8b1e1e;
}

.box.clickable:hover, .box.clickable:focus{
  background:#fff;
  box-shadow:0 8px 32px rgba(30,0,100,0.22);
  color:var(--accent-dark);
  transform:scale(1.03);
  z-index:2;
  cursor:pointer;
}

.status-page {
  padding: 10px;
}

.status-card {
  display: grid;
  gap: 0.9em;
  width: calc(100% - 20px);
  margin: 20px 10px;
}

.status-title {
  width: calc(100% + 40px);
  margin: -20px -20px 0;
  padding: 0.55em 1em;
  border: 0;
  border-bottom: 4px solid rgb(12,26,45);
  border-radius: 10px 10px 0 0;
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  color: var(--white);
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.08;
  text-align: center;
}

.status-lead {
  margin: 0;
  color: rgb(12,26,45);
  font-size: 1.12em;
  font-weight: 650;
}

.summary-lead {
  margin: 0 0 0.9em;
  font-weight: 700;
  color: #1f3b66;
}

.summary-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 0.9em;
}

.summary-quick-item {
  border: 1px solid rgba(12, 26, 45, 0.2);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 174, 0, 0.08);
}

.summary-quick-key {
  display: block;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #274a7d;
  margin-bottom: 2px;
}

.summary-quick-value {
  display: block;
  line-height: 1.25;
}

.summary-quick-extra {
  margin: 0 0 0.9em;
  font-weight: 600;
}

.summary-language-icons {
  --language-flag-gap: clamp(2px, 0.9vw, 5px);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--language-flag-gap);
  justify-content: center;
  margin: 0 0 0.9em;
}

.summary-language-icon {
  background: #fff;
  border: 1px solid rgba(12, 26, 45, 0.16);
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(12, 26, 45, 0.08);
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  width: min(2.48rem, calc((100% - (7 * var(--language-flag-gap))) / 8));
}

.summary-quick-links {
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.summary-quick-links a {
  color: var(--accent-dark);
  text-decoration: none;
}

.summary-quick-links a:hover,
.summary-quick-links a:focus {
  text-decoration: underline;
}

.home-topic-box {
  justify-content: flex-start;
}

.home-topic-cloud {
  align-content: center;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.65rem;
  justify-content: center;
  min-height: 190px;
  padding: 0.35rem 0 0.1rem;
}

.home-topic-tag {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(12, 26, 45, 0.16);
  border-radius: 8px;
  box-shadow: 0 5px 16px rgba(12, 26, 45, 0.08);
  color: #15223b;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1.05;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 0.38em 0.58em;
  text-align: center;
}

.home-topic-tag.is-xl {
  font-size: 1.55rem;
}

.home-topic-tag.is-lg {
  font-size: 1.34rem;
}

.home-topic-tag.is-md {
  font-size: 1.12rem;
}

.home-topic-tag.is-sm {
  font-size: 0.98rem;
}

.home-topic-tag.is-warm {
  background: rgba(255, 152, 0, 0.18);
  border-color: rgba(255, 152, 0, 0.35);
}

.home-topic-tag.is-cool {
  background: rgba(31, 73, 125, 0.1);
  border-color: rgba(31, 73, 125, 0.28);
  color: #16345d;
}

.home-topic-tag.is-fresh {
  background: rgba(35, 124, 63, 0.1);
  border-color: rgba(35, 124, 63, 0.26);
  color: #1d5d33;
}

.home-topic-tag.is-more {
  background: rgb(31, 73, 125);
  border-color: rgb(31, 73, 125);
  color: #fff;
}

.home-topic-tag.is-tilt-left {
  transform: rotate(-1.5deg);
}

.home-topic-tag.is-tilt-right {
  transform: rotate(1.4deg);
}

.home-date-status {
  display: grid;
  gap: 0.35em;
  margin-bottom: 1em;
  padding: 0.85em;
  border: 2px solid rgba(31, 73, 125, 0.22);
  border-left-width: 8px;
  border-radius: 8px;
  background: #fff;
}

.home-date-status.is-bookable {
  border-color: rgba(35, 124, 63, 0.35);
  border-left-color: #237c3f;
  background: rgba(35, 124, 63, 0.08);
}

.home-date-status.is-full {
  border-color: rgba(179, 0, 0, 0.35);
  border-left-color: #b30000;
  background: rgba(179, 0, 0, 0.08);
}

.home-date-status.is-paused {
  border-color: rgba(31, 73, 125, 0.3);
  border-left-color: rgb(31, 73, 125);
  background: rgba(31, 73, 125, 0.08);
}

.home-date-status.is-secondary {
  margin-top: -0.35em;
}

.home-date-status-label {
  justify-self: start;
  padding: 0.18em 0.55em;
  border-radius: 999px;
  color: #fff;
  background: rgb(31, 73, 125);
  font-size: 0.82em;
  font-weight: 800;
  text-transform: uppercase;
}

.home-date-status.is-bookable .home-date-status-label {
  background: #237c3f;
}

.home-date-status.is-full .home-date-status-label {
  background: #b30000;
}

.home-date-status strong {
  color: var(--accent-dark);
  font-size: 1.12em;
  line-height: 1.25;
}

.home-date-status span:not(.home-date-status-label),
.home-date-status em {
  color: #334155;
  line-height: 1.35;
}

.home-date-status em {
  font-style: normal;
  font-weight: 800;
}

.home-date-more-hint {
  margin-top: 0;
  font-weight: 650;
}

.home-date-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55em;
  margin-top: auto;
  padding-top: 0.8em;
}

.home-date-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.35em;
  padding: 0.45em 0.65em;
  border: 1px solid rgba(31, 73, 125, 0.25);
  border-radius: 6px;
  color: var(--accent-dark);
  background: #fff;
  font-weight: 800;
  text-decoration: none;
}

.home-date-actions .home-date-action-primary {
  flex-basis: 100%;
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 4px 14px rgba(31, 73, 125, 0.22);
}

.home-date-actions a:hover,
.home-date-actions a:focus {
  color: #fff;
  background: rgb(31, 73, 125);
}

.home-signup-box {
  overflow: hidden;
  padding-bottom: 0;
}

.home-signup-box p {
  margin-bottom: 0.9em;
}

.home-signup-button {
  align-items: center;
  align-self: flex-start;
  background: var(--accent);
  border-radius: 6px;
  color: #fff;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  margin: 0.2em 0 1em;
  min-height: 2.5em;
  padding: 0.45em 0.8em;
  text-decoration: none;
}

.home-signup-button:hover,
.home-signup-button:focus {
  background: rgb(31, 73, 125);
  color: #fff;
}

.home-signup-art {
  align-self: stretch;
  line-height: 0;
  margin: auto -20px 0;
  overflow: visible;
}

.home-signup-silhouette {
  display: block;
  height: auto;
  max-width: none;
  width: 100%;
}

.map-consent-panel {
  border: 1px solid rgba(12, 26, 45, 0.2);
  border-radius: 8px;
  padding: 12px;
  background: rgba(12, 26, 45, 0.06);
}

.map-consent-panel p {
  margin: 0 0 10px;
}

.map-consent-load {
  border: 0;
  border-radius: 6px;
  padding: 0.65em 1em;
  font: inherit;
  font-weight: 700;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

.map-consent-load:hover,
.map-consent-load:focus {
  background: #1a237e;
}

.map-frame-wrap {
  margin-top: 12px;
  border: 1px solid rgba(12, 26, 45, 0.2);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.map-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.legal-wrap {
  padding: 10px;
}

.legal-wrap .legal-doc {
  margin: 0;
  color: #181f2a;
}

.legal-doc {
  border-radius: 0;
}

.legal-doc p,
.legal-doc li,
.legal-doc h2,
.legal-doc h3 {
  color: #181f2a;
}

.legal-doc a {
  color: #1f3b66;
}

.legal-doc h2 {
  border-radius: 0;
  width: auto;
  margin: 1.35em 0 0.55em;
  margin-left: 0;
  margin-right: 0;
  padding: 0.35em 0;
  box-shadow: none;
  border-bottom: 2px solid rgb(12,26,45);
}

.legal-doc h2:first-of-type {
  margin-top: 0;
}

.legal-doc h3 {
  margin: 1em 0 0.45em;
}

.legal-doc p,
.legal-doc ul,
.legal-doc ol {
  margin: 0 0 0.9em;
}

.legal-doc li {
  margin: 0 0 0.35em;
}

/* Responsive Spalten */
@media (max-width:899.98px){
  .box{flex-basis:calc(50% - 20px)}

  .booking-sticky-title {
    top: var(--booking-sticky-offset, 60px);
    font-size: 1.25em;
    padding: 0.2em 0.75em;
  }
}
@media (max-width:600px){
  .box{flex-basis:100%}

  .summary-quick-grid {
    grid-template-columns: 1fr;
  }

  .home-topic-cloud {
    justify-content: center;
    min-height: auto;
  }

  .home-topic-tag.is-xl {
    font-size: 1.35rem;
  }

  .home-topic-tag.is-lg {
    font-size: 1.2rem;
  }

  .home-topic-tag.is-md {
    font-size: 1.05rem;
  }
}


@keyframes pop {
  0% { transform:scale(0.6); opacity:0; }
  80% { transform:scale(1.08); opacity:1; }
  100% { transform:scale(1); }
}

/* Animation */
@keyframes counting{
  100%{transform:translate3d(0,-10em,0)}
}

/* Responsive Anpassungen für maxi (kleine Bildschirme) */
@media (max-width:600px){
  .maxi{flex-direction:column;align-items:center;text-align:center;padding:16px}
  .maxi img{max-width:90vw;width:90vw;height:auto;margin-bottom:10px;padding-left:5vw;padding-right:5vw}
  .einspaltig .maxi h1, .einspaltig .maxi h2, .einspaltig .maxi p{
    width:100vw;max-width:100vw;box-sizing:border-box;text-align:center;margin:0 auto;
  }
  .einspaltig .maxi h1{font-size:1.3em;word-break:break-word}
}

/* Kleine Hilfsregeln */
.hidden{display:none!important}
.visually-hidden{position:absolute!important;left:-9999px!important}

#aufmacher {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.maxi-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
}

.logo {
  height: 140px;
  width: auto;
  flex-shrink: 0;
  margin-right: 2rem;
}

#aufmacher .maxi-text {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  text-align: left;
}

#aufmacher .aufmacher-track {
  display: flex;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  transition: transform 0.7s cubic-bezier(.2,.9,.3,1);
}

#aufmacher .aufmacher-slide {
  flex: 0 0 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 1rem;
  box-sizing: border-box;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: anywhere;
}

#aufmacher .aufmacher-title {
  color: var(--accent);
  font-size: 2.1rem;
  font-weight: 800;
  margin: 0 0 .25em 0;
  letter-spacing: 1px;
  line-height: 1.05;
}

#aufmacher .aufmacher-sub {
  color: var(--white);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
}

@media (max-width:899.98px) {
  #aufmacher .maxi-content {
    display: block;
    gap: 0;
    text-align: center;
  }

  #aufmacher .maxi-text {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  #aufmacher .aufmacher-slide {
    align-items: center;
    text-align: center;
  }
}