/* FONTS */
/* inter */
@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 400; src: url('fonts/inter-v19-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Inter'; font-style: normal; font-weight: 600; src: url('fonts/inter-v19-latin-600.woff2') format('woff2'); }
/* share-tech-mono-regular - latin */
@font-face { font-display: swap; font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; src: url('fonts/share-tech-mono-v15-latin-regular.woff2') format('woff2'); }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  padding-bottom: 60px;
  background: #f9fafb;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  color: #224664;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.scroll-section {
  min-height: 100vh;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 0 8vh 0;
  gap: 36px;
  box-sizing: border-box;
  background: #f9fafb;
}

.section-headline, h1.section-headline, h2.section-headline {
  font-family: 'Share Tech Mono', monospace;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin-bottom: 1.5rem;
  margin-top: 0;
  color: #224664;
  max-width: 540px;
  white-space: pre-line;
  text-align: left;
}

h2.section-headline {
  font-size: 2.2rem;
  margin-bottom: 1.15rem;
}
.section-content h3 {
  margin-bottom: 0.5rem;  /* vorher war standardmäßig größer */
}
#start .section-content {
  padding-top: 10vh;
}
#start .section-img {
  padding-top: 14vh;
}
#rechtliches .section-content {
  padding-top: 4vh;
}
#rechtliches .section-img {
  padding-top: 4vh;
  margin-top: 0;
  align-self: start;
}


.section-img {
  flex: 1 1 300px;
  display: flex;
  padding-top: 10vh;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 210px;
  margin-top: 0;
}
.section-img img {
  max-width: 310px;
  width: 100%;
  height: auto;
  border-radius: 15px;
  margin-bottom: 7px;
  box-shadow: 0 2px 14px #0001;
}
#foerderung .section-img {
  flex: 1 1 300px;
  display: flex;
  padding-top: 10vh;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 210px;
}
#foerderung .section-img img {
  max-width: 310px;
  width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 2px 14px #0001;
}

.caption {
  font-size: 1.01rem;
  color: #6c7a8a;
  margin-bottom: 8px;
  text-align: left;
  padding-left: 4px;
  min-height: 18px;
}

.section-content {
  max-width: 630px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  justify-content: flex-start;
  padding-top: 10vh;
}

ul {
  margin: 13px 0 14px 22px;
  padding: 0;
  font-size: 1.07rem;
  color: #17364d;
  line-height: 1.30;
}
li { margin-bottom: 0.3em; }
strong { font-weight: 600; color: #133350; }
p { font-size: 1.11rem; margin-bottom: 9px; color: #19304b; line-height: 1.34; }
.button-row { 
  margin-top: 1.3em; 
}

.btn, .quiz-btn, .pro-btn, button, a.btn {
  background: #08385d;
  color: #fff;
  border: none;
  border-radius: 29px;
  font-size: 1.13rem;
  font-weight: 500;
  padding: 13px 42px;
  margin: 13px 13px 0 0;
  cursor: pointer;
  transition: background 0.13s, transform 0.13s, box-shadow 0.15s;
  box-shadow: 0 2px 10px 0 rgba(20, 44, 73, 0.10);
  outline: none;
  text-decoration: none;
  display: inline-block;        /* Stelle sicher, dass es inline-block ist */
  letter-spacing: 0.01em;
  min-width: 220px;             /* Einheitliche Mindestbreite */
  max-width: 340px;             /* Optional: Maximalbreite, anpassbar */
  text-align: center;
}

.btn:hover, .quiz-btn:hover, .pro-btn:hover {
  background: #1863a7;
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 7px 20px #07354d33;
}

.quiz-btn {
  min-width: 110px;
  padding: 10px 26px;
  font-size: 1.06rem;
  margin-right: 18px;
}
.pro-btn {
  font-size: 1.13rem;
  font-weight: bold;
  padding: 14px 62px;
  margin: 26px 0 0 0;
  background: #faad13;
  color: #222;
  border: none;
  box-shadow: 0 2px 12px #ffcb6b22;
}

#quiz-app .quiz-box {
  background: #f7faff;
  border-radius: 13px;
  padding: 18px 21px 19px 21px;
  margin-bottom: 17px;
  box-shadow: 0 2px 13px #20406112;
}
#quiz-app .quiz-result {
  background: #e7eefc;
  border-radius: 13px;
  padding: 22px 23px 24px 23px;
  margin-top: 10px;
  box-shadow: 0 2px 11px #223e6031;
  text-align: left;
}
.pro-check-tip {
  margin-top: 24px;
  margin-bottom: 9px;
  font-size: 1.09rem;
  color: #074f74;
}

input[type="text"], input[type="email"], select, textarea {
  width: 100%;
  font-size: 1rem;
  padding: 9px 16px;
  margin: 8px 0 14px 0;
  border-radius: 9px;
  border: 2px solid #3c5871;
  background: #f7faff;
  outline: none;
  box-sizing: border-box;
  transition: border 0.16s;
}
input:focus, select:focus, textarea:focus {
  border: 2px solid #08385d;
  background: #fff;
}
textarea {
  min-height: 50px;
  resize: vertical;
}
input[type="checkbox"] {
  accent-color: #003b5a;
  border-radius: 7px;
}
/* Floating Icon Button */
.legal-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #254463;
  color: #fff;
  font-size: 2.2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: 0 4px 24px rgba(40,60,100,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 9999;
  transition: background 0.15s;
}
.legal-fab:hover {
  background: #163049;
}

/* Modal Overlay */
.legal-modal {
  display: none; position: fixed;
  z-index: 9999;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(40,60,80,0.18);
  align-items: center; justify-content: center;
}
.legal-modal.show { display: flex; }
.legal-modal-content {
  background: #fff;
  color: #153354;
  padding: 36px 36px 30px 36px;
  border-radius: 17px;
  box-shadow: 0 8px 40px #25446324;
  width: 95vw; max-width: 440px;
  margin: 12vw auto 0 auto;
  font-size: 1.13rem;
  position: relative;
  text-align: left;
  animation: modalPopIn 0.3s cubic-bezier(.35,1.39,.49,1) ;
}
@keyframes modalPopIn {
  0%   { transform: scale(0.90); opacity:0; }
  90%  { transform: scale(1.05);}
  100% { transform: scale(1); opacity:1; }
}
.legal-modal-close {
  position: absolute; right: 28px; top: 18px;
  font-size: 2.2rem;
  color: #7a8799;
  cursor: pointer;
  transition: color 0.17s;
  font-weight: 400;
  line-height: 1;
}
.legal-modal-close:hover { color: #d15b47; }
.legal-modal-content h2 {
  margin-top: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: #153354;
  letter-spacing: -0.01em;
}
.legal-modal-content h3 {
  margin: 22px 0 12px 0;
  font-size: 1.28rem;
  color: #223355;
}
.legal-modal-content ul {
  margin: 0 0 8px 20px; padding: 0;
  list-style: disc;
}
.legal-modal-content li {
  margin: 0 0 4px 0;
  font-size: 1rem;
}
.legal-modal-content hr {
  margin: 26px 0 18px 0;
  border: none; border-top: 1.5px solid #e1e7f0;
}
.legal-btn {
  background: #163c5a;
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 9px 16px;
  font-size: 1rem;
  font-weight: 500;
  margin: 17px 0 19px 0;
  cursor: pointer;
  transition: background 0.17s;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}
.legal-btn:hover {
  background: #1a2841;
}
@media (max-width: 520px) {
  .legal-modal-content { padding: 18px 7vw; font-size: 1rem;}
  .legal-modal-content h2 { font-size: 1.3rem;}
  .legal-btn { font-size: 1rem; padding: 9px 16px;}
}


/* MODAL POPUPS */
.modal {
  display: none;
  position: fixed;
  z-index: 1100;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(12,19,32,0.60);
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: #fff;
  border-radius: 16px;
  padding: 37px 32px 29px 32px;
  max-width: 420px;
  width: 96vw;
  box-shadow: 0 10px 36px #071e3433;
  position: relative;
  font-size: 1.05rem;
  text-align: left;
}
.modal-close {
  position: absolute; top: 18px; right: 22px;
  font-size: 1.85rem;
  color: #29495c;
  font-weight: 400;
  cursor: pointer;
  transition: color 0.14s;
}
.modal-close:hover { color: #bc2b0c; }
.modal h2 { font-size: 1.18rem; margin-bottom: 17px; }
#kontakt-form label { display:block; margin:11px 0 3px 0; }
#kontakt-form input, #kontakt-form textarea {
  width:100%; margin-bottom:11px;
  border-radius: 7px; border: 1.5px solid #b5c3d0;
  font-size: 1.04rem; padding: 8px 12px;
}
#kontakt-form button {
  width:100%; margin-top:8px;
  background: #074f74;
  font-weight: 500; font-size:1.07rem;
}
#kontakt-danke {
  text-align:center; font-weight:500; font-size:1.09rem;
  margin-top:23px;
}

body.modal-open { overflow: hidden; }

/* Responsive */
@media (max-width: 1150px) {
  .scroll-section { max-width: 98vw; gap: 14px; }
}
@media (max-width: 950px) {
  .scroll-section { flex-direction: column; gap: 10px; align-items: center; }
  .section-img { align-items: center; margin-bottom: 0.4em; }
  .section-content { max-width: 99vw; padding-top: 10vh; }
  .footer-logos img { max-height: 32px; }
  .section-headline, h1.section-headline, h2.section-headline { font-size: 2.0rem; }
}
@media (max-width: 600px) {
  .section-headline, h1.section-headline, h2.section-headline { font-size: 1.17rem; }
  .btn, .pro-btn, .quiz-btn { font-size: 0.95rem; padding: 9px 15px; }
  .section-img img { max-width: 97vw; }
  .section-img { margin-bottom: 0.3em; }
  main { padding: 0 2vw 14px 2vw; }
}
/* ===========================================
   Kompaktes Förder-Formular (weniger Abstand)
   =========================================== */

#foerderung .section-content {
  max-width: 580px;
  margin: 0 auto;
}

#foerderung form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px; /* vertikal 10px, horizontal 12px */
  align-items: center;
}

#foerderung form input,
#foerderung form select,
#foerderung form textarea {
  padding: 8px 10px;
  font-size: 0.95rem;
}

#name,
#company,
#branche,
#massnahme {
  grid-column: auto;
}

#projektidee,
#email,
#foerderung form p,
#foerderung form button {
  grid-column: span 2;
}


/* ===========================================
   Zweispaltiges Layout für Section #rechtliches
   =========================================== */

#rechtliches .rechtliches-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: start;
}

#rechtliches .rechtliches-grid h3,
#rechtliches .rechtliches-grid h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

#rechtliches .rechtliches-grid p,
#rechtliches .rechtliches-grid li {
  font-size: 1.07rem;
  line-height: 1.45;
}
.privacy-modal {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.privacy-modal.show {
  display: flex;
}
.privacy-modal-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  position: relative;
}
.privacy-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 1.8rem;
  cursor: pointer;
}
/* === KI-Bild-Effekte === */

.img-glow {
  box-shadow: 0 0 60px 10px #94befa, 0 2px 8px #5552 inset !important;
  filter: brightness(1.15) contrast(1.10);
  animation: glowPulse 3.2s infinite alternate;
}
@keyframes glowPulse {
  0% { box-shadow: 0 0 60px 10px #7bb3fa, 0 2px 8px #5552 inset; }
  100% { box-shadow: 0 0 80px 20px #c7e0ff, 0 2px 8px #7774 inset; }
}

.img-light-sweep {
  position: relative;
  overflow: hidden;
}
.img-light-sweep::after {
  content: "";
  display: block;
  position: absolute;
  top: -40%;
  left: -50%;
  width: 50%;
  height: 180%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 60%, rgba(255,255,255,0.4) 80%, rgba(255,255,255,0));
  transform: skewX(-22deg);
  animation: sweep 2.6s infinite;
  pointer-events: none;
}
@keyframes sweep {
  0% { left: -60%;}
  80% { left: 110%;}
  100% { left: 110%;}
}

.img-pulse {
  animation: imgPulse 2.2s infinite;
  filter: brightness(1.11) saturate(1.15);
}
@keyframes imgPulse {
  0% { filter: brightness(1.11) saturate(1.15);}
  50% { filter: brightness(1.21) saturate(1.35);}
  100% { filter: brightness(1.11) saturate(1.15);}
}

.img-soft-shadow {
  box-shadow: 0 4px 32px 0 #b5e7ff60, 0 1px 16px #1112 !important;
  animation: shadowMove 3.3s infinite alternate;
}
@keyframes shadowMove {
  0% { box-shadow: 0 4px 32px 0 #b5e7ff90, 0 1px 16px #1112; }
  100% { box-shadow: 0 8px 44px 0 #fbc2ff60, 0 1px 16px #8883; }
}

.img-micro-move {
  animation: microMove 7s infinite linear;
}
@keyframes microMove {
  0% { transform: translateY(0) scale(1);}
  35% { transform: translateY(-3px) scale(1.01);}
  60% { transform: translateX(2px) scale(0.995);}
  90% { transform: translateY(2px) scale(1);}
  100% { transform: translateY(0) scale(1);}
}
.img-farbshift {
  animation: colorShift 3.6s infinite alternate;
  transition: filter 0.3s;
}
@keyframes colorShift {
  0%   { filter: hue-rotate(0deg) saturate(1.1) brightness(1); }
  45%  { filter: hue-rotate(35deg) saturate(1.13) brightness(1.06);}
  60%  { filter: hue-rotate(80deg) saturate(1.2) brightness(1.09);}
  100% { filter: hue-rotate(0deg) saturate(1.13) brightness(1);}
}