/* ============================================================
   aiutanda Infotreff – Gestaltung
   ------------------------------------------------------------
   Farben, Schriften und Feldformen wie in der Messe-App.
   ============================================================ */

/* --- Schriften ---------------------------------------------
   Die Dateien liegen in assets/. Fehlen sie, greift die
   Systemschrift – die Seite bleibt benutzbar.              */

@font-face {
  font-family: 'CoreMellow';
  src: url('assets/CoreMellow55Medium.woff') format('woff');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Sabina';
  src: url('assets/Sabina.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}

:root {
  --beere:        #CE0058;
  --beere-dunkel: #A80047;
  --petrol:        #165C7D;
  --petrol-dunkel: #114A66;
  --text:         #2B2B2B;
  --text-leise:   #6B6B6B;
  --rand:         #D8D8D8;
  --karte:        #FFFFFF;
  --rosa:         #F089A7;   /* Grundfarbe hinter dem Bild */

  --schrift-titel: 'CoreMellow', 'Trebuchet MS', 'Segoe UI', sans-serif;
  --schrift-claim: 'Sabina', 'CoreMellow', 'Trebuchet MS', sans-serif;
  --schrift-text:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                   'Helvetica Neue', Arial, sans-serif;

  --radius: 6px;
  --schatten: 0 6px 24px rgba(120, 20, 70, 0.14);

  /* Kartenpolster als Variable, weil der Knopf als Balken
     genau um diesen Wert über den Rand hinausgehen muss. */
  --karte-pad-x: 40px;
  --karte-pad-y: 34px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--schrift-text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--rosa);
  -webkit-text-size-adjust: 100%;
}

/* --- Feststehender Hintergrund ----------------------------- */

.hintergrund {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('assets/hero.webp');
  background-size: cover;
  /* Oben links verankert: der Beschnitt fällt immer rechts bzw.
     unten an, damit der Text in der Bubble seinen Abstand zum
     Rand behält – egal wie das Fenster geformt ist. */
  background-position: left top;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* --- Grundgerüst ------------------------------------------- */

.seite {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 20px;
}

/* Ab dieser Breite ist links genug Platz für Leon: die Spalte
   wandert nach rechts, wie auf aiutanda.de/de/aiu-job/ */
@media (min-width: 1180px) {
  .seite {
    max-width: 1360px;
    display: grid;
    grid-template-columns: 1fr 620px;
    column-gap: 40px;
    padding: 0 40px 20px;
  }
  .kopf   { grid-column: 2; }
  .inhalt { grid-column: 2; margin-top: 15vh; }
}

.kopf {
  display: flex;
  justify-content: flex-end;
  padding: 28px 0 0;
}

.kopf__logo {
  display: block;
  height: 42px;
  width: auto;
  /* Das Logo ist 4,2-mal so breit wie hoch. */
  filter: drop-shadow(0 1px 5px rgba(255, 255, 255, 0.55));
}

/* Freiraum, damit der Claim im Bild oben sichtbar bleibt,
   bevor die erste Karte darüber liegt. */
.inhalt {
  margin-top: 34vh;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* --- Karten ------------------------------------------------ */

.karte {
  background: var(--karte);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: var(--karte-pad-y) var(--karte-pad-x);
}

/* Formularkarte: unten kein Polster, damit der Knopf als
   durchgehender Balken auf dem Kartenrand sitzt. */
.karte--formular {
  padding-bottom: 0;
  overflow: hidden;
}

/* Nach erfolgreicher Anmeldung steht kein Knopf mehr da,
   also braucht die Karte ihr unteres Polster zurück. */
.karte--bestaetigung { padding-bottom: var(--karte-pad-y); }

.karte--titel {
  padding-bottom: 26px;
}

.claim {
  margin: 0 0 4px;
  font-family: var(--schrift-claim);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--beere);
}

.titel {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: 2.1rem;
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--petrol);
}

.karte__titel {
  margin: 0 0 10px;
  font-family: var(--schrift-titel);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--petrol);
}

/* Überschrift der Formularkarte wie auf aiu-job */
.karte--formular .karte__titel {
  text-align: center;
  font-size: 1.9rem;
  margin-bottom: 6px;
}

.karte--formular .karte__titel::before { display: none; }

.karte--formular .karte__text {
  text-align: center;
  color: var(--text-leise);
  font-size: 0.95rem;
}

.karte__text {
  margin: 0;
  color: var(--text);
}

/* Beere-Strich als einziges wiederkehrendes Zeichen */
.karte__titel::before {
  content: '';
  display: block;
  width: 46px;
  height: 4px;
  margin-bottom: 14px;
  border-radius: 2px;
  background: var(--beere);
}

.karte--titel .claim,
.karte--titel .titel { text-align: left; }

/* Die Termine unter der Überschrift: Versalien in Beere */
.termine {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.termine li {
  font-family: var(--schrift-titel);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--beere);
}

.termine li + li { margin-top: 5px; }

/* Aufzählungen im Erklärtext, Punkt in Beere */
.punkte {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.punkte li {
  position: relative;
  padding: 0 0 0 22px;
  margin-bottom: 9px;
  line-height: 1.5;
}

.punkte li:last-child { margin-bottom: 0; }

.punkte li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--beere);
}

/* --- Formular ---------------------------------------------- */

.formular {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Zwei Felder nebeneinander wie Vorname/Nachname auf aiu-job.
   Unter 620px stapeln sie automatisch. */
.reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  align-items: start;
}

.feld {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.feld > label {
  margin-bottom: 8px;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--petrol);
}

.pflicht { color: var(--beere); }

.formular input[type="text"],
.formular input[type="email"],
.formular select,
.formular textarea {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text);
  background: #FFFFFF;
  border: 1px solid var(--rand);
  border-radius: 6px;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.formular textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.5;
}

/* Eigener Pfeil, weil appearance:none den Standardpfeil entfernt */
.formular select {
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23165C7D' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.formular input:focus,
.formular select:focus,
.formular textarea:focus {
  outline: none;
  border-color: var(--beere);
  box-shadow: 0 0 0 3px rgba(206, 0, 88, 0.16);
}

.formular input:focus-visible,
.formular select:focus-visible,
.formular textarea:focus-visible,
.knopf:focus-visible,
a:focus-visible {
  outline: 3px solid var(--beere);
  outline-offset: 2px;
}

.formular input::placeholder,
.formular textarea::placeholder { color: #A9A9A9; }

.hinweis {
  margin: 7px 0 0;
  font-size: 0.85rem;
  color: var(--text-leise);
}

.hinweis--fuss { margin-top: 0; }

/* --- Fehlende oder unklare Angaben ------------------------- */

.feld--fehler input[type="text"],
.feld--fehler input[type="email"],
.feld--fehler select,
.feld--fehler textarea {
  border-color: var(--beere);
  border-width: 2px;
  background: #FFF7FA;
}

.feld--fehler input:focus,
.feld--fehler select:focus,
.feld--fehler textarea:focus {
  box-shadow: 0 0 0 3px rgba(206, 0, 88, 0.18);
}

.feld--fehler > label { color: var(--beere); }

.fehler {
  margin: 8px 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--beere);
}

/* Häkchen-Feld: Rahmen um das Kästchen, Hinweis in eigener Zeile */
.feld--haken.feld--fehler input[type="checkbox"] {
  outline: 2px solid var(--beere);
  outline-offset: 2px;
  border-radius: 3px;
}

.feld--haken .fehler {
  flex: 0 0 100%;
  margin-top: 10px;
}

/* Hinweis oben im Formular */
.panne {
  margin: 20px 0 0;
  padding: 14px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--beere);
  background: #FFF0F6;
  border-left: 4px solid var(--beere);
  border-radius: 8px;
}

.panne a { color: var(--beere); }

/* Häkchen Datenschutz */
.feld--haken {
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
}

.feld--haken input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: var(--beere);
  cursor: pointer;
}

.feld--haken label {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-weight: 400;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--petrol);
}

.feld--haken a { color: var(--beere); }

/* Honeypot: für Menschen unsichtbar, für Skripte vorhanden */
.falle {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Knopf ------------------------------------------------- */

.knopf {
  /* Balken über die volle Kartenbreite: der negative Rand hebt
     das Kartenpolster auf, damit der Knopf bündig abschließt. */
  width: calc(100% + 2 * var(--karte-pad-x));
  margin: 8px calc(-1 * var(--karte-pad-x)) 0;
  min-height: 62px;
  padding: 18px 24px;
  font-family: var(--schrift-titel);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: #FFFFFF;
  background: var(--petrol);
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.15s;
}

.knopf:hover  { background: var(--petrol-dunkel); }
.knopf:active { background: #0F4560; }

/* --- Meldungsseite (senden.php) ---------------------------- */

.meldung__zeichen {
  font-family: var(--schrift-titel);
  font-size: 2rem;
  line-height: 1;
  margin: 0 0 12px;
  color: var(--beere);
}

.karte--meldung .karte__text + .karte__text { margin-top: 12px; }

.zurueck {
  display: inline-block;
  margin-top: 22px;
  font-weight: 600;
  color: var(--beere);
  text-decoration: none;
  border-bottom: 2px solid rgba(206, 0, 88, 0.35);
}

.zurueck:hover { border-bottom-color: var(--beere); }

.werte {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.werte li {
  padding: 8px 0;
  border-top: 1px solid #EDEDED;
}

.werte strong {
  color: var(--petrol);
  font-weight: 600;
}

/* --- Fußzeile mit geschwungener Welle -----------------------

   Die Welle ist bei aiutanda.de eine PNG-Grafik. Hier steckt sie
   als SVG direkt im Stylesheet: keine zusätzliche Datei, scharf
   auf jedem Bildschirm, und die Farbe ist unten im Pfad als
   fill="%23CE0058" hinterlegt – wird die Farbe geändert, muss sie
   dort mit geändert werden (%23 steht für das Rautezeichen).
   ------------------------------------------------------------- */

.fuss {
  position: relative;
  z-index: 1;
  margin-top: 70px;
  padding: 30px 20px 50px;
  background: var(--beere);
}

/* Die Welle sitzt auf der Oberkante des Bandes und ragt nach oben
   in das Bild hinein. */
.fuss::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 115px;
  /* Ein Berg links, ein Tal rechts. Der Pfad enthält bewusst nur
     je einen – dadurch bleibt die Form auch gestaucht auf dem
     Handy dieselbe und wird nicht zu Berg-Tal-Berg. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 115' preserveAspectRatio='none'%3E%3Cpath d='M0 44 C 130 12 260 2 410 13 C 700 34 1060 95 1440 90 L1440 115 L0 115 Z' fill='%23CE0058'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.fuss__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  max-width: 1360px;
  margin: 0 auto;
}

/* Das Logo liegt als farbige Datei vor. Der Filter macht daraus
   eine weiße Version, damit keine zweite Datei nötig ist. */
.fuss__logo {
  height: 34px;
  width: auto;
  /* Macht aus dem farbigen Logo eine weiße Version –
     eine zweite Datei ist dadurch nicht nötig. */
  filter: brightness(0) invert(1);
}

.fuss__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
}

.fuss__links a {
  font-family: var(--schrift-titel);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.fuss__links a:hover { border-bottom-color: #FFFFFF; }

/* --- Kleinere Bildschirme ---------------------------------- */

@media (max-width: 640px) {
  body { font-size: 16px; }

  :root {
    --karte-pad-x: 22px;
    --karte-pad-y: 26px;
  }

  /* Im Hochformat würde ein bildschirmfüllender Hintergrund das
     Bild so stark vergrößern, dass Leon herausfällt. Deshalb hier
     ein Band oben, das nach unten in die Grundfarbe ausläuft.
     Die Höhe steuert zugleich, wie stark das Bild vergrößert wird:
     flacher heißt weniger Zoom und mehr Bild in der Breite – so
     bleibt oben rechts Platz frei für das Logo. */
  .hintergrund {
    height: 27vh;
    inset: 0 0 auto 0;
    background-position: left top;
    -webkit-mask-image: linear-gradient(to bottom,
                        #000 76%, rgba(0, 0, 0, 0) 100%);
            mask-image: linear-gradient(to bottom,
                        #000 76%, rgba(0, 0, 0, 0) 100%);
  }

  .seite  { padding: 0 14px 10px; }
  .kopf__logo { height: 30px; }
  .inhalt { margin-top: 17vh; gap: 16px; }

  .titel                          { font-size: 1.7rem; }
  .karte__titel                   { font-size: 1.25rem; }
  .karte--formular .karte__titel  { font-size: 1.45rem; }
  .claim                          { font-size: 1.3rem; }
  .termine li                     { font-size: 0.95rem; }

  /* Überschrift der Formularkarte links wie im Handy-Screenshot */
  .karte--formular .karte__titel,
  .karte--formular .karte__text { text-align: left; }

  .knopf {
    min-height: 58px;
    font-size: 1rem;
    letter-spacing: 0.04em;
  }

  .fuss          { margin-top: 50px; padding: 24px 18px 40px; }
  .fuss::before  { height: 34px; }   /* flach wie am Desktop */
  .fuss__innen   { justify-content: flex-start; gap: 20px; }
  .fuss__logo    { height: 28px; }
  .fuss__links   { gap: 10px 24px; }
  .fuss__links a { font-size: 0.85rem; }
}

@media (max-width: 400px) {
  .inhalt { margin-top: 22vh; }
}