/* ==================================================================
   Seite: Kontakt
   ================================================================== */

.wrap{max-width:1240px;margin:0 auto;padding:0 44px}

/* ---------- Standorte ---------- */
.loc{padding:40px 0 56px}
.loc .sh{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--g200);padding-bottom:16px;margin-bottom:28px}
.loc .sh h2{font-weight:900;font-size:clamp(22px,3vw,32px);letter-spacing:-.02em}
.loc .sh .c{font-size:14px;color:var(--g400)}
.locs{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.lc{border:1px solid var(--ink);padding:30px 30px 32px;position:relative}
/* Abzeichen oben rechts auf der Werkstatt-Karte. Das Pulsieren ist der
   einzige bewegte Punkt der Seite — deshalb langsam und flach, sonst
   zieht es die Aufmerksamkeit vom Formular ab. */
.lc .pin{position:absolute;top:-13px;right:20px;background:var(--red);color:#fff;
  font-weight:700;font-size:13px;line-height:1;letter-spacing:.01em;
  padding:9px 15px;border-radius:999px;white-space:nowrap;
  box-shadow:0 3px 12px rgba(172,20,36,.28);animation:pinpuls 2.8s ease-in-out infinite}
@keyframes pinpuls{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
@media(prefers-reduced-motion:reduce){.lc .pin{animation:none}}
.lc .tag{font-family:var(--mono);font-size:12px;color:var(--red);margin-bottom:14px}
.lc h3{font-weight:900;font-size:20px;letter-spacing:-.01em;margin-bottom:12px}
.lc address{font-style:normal;font-size:16px;line-height:1.65;color:var(--g700)}
.lc .go{display:inline-block;margin-top:18px;font-weight:700;font-size:15px;color:var(--red)}
.lc .go:hover{color:var(--red-h)}
/* Es gibt keine festen Öffnungszeiten — der Hinweis steht deshalb
   direkt unter den Adressen, damit niemand unangemeldet vorfährt. */
.locnote{margin-top:22px;font-size:16px;line-height:1.6;color:var(--g700);border-left:3px solid var(--red);padding-left:18px;max-width:720px}
.locnote strong{font-weight:700;color:var(--ink)}

/* ---------- Engagement ---------- *
   Sitzt unter den Kontaktwegen in der rechten Spalte. Die Logos stehen
   ruhig nebeneinander und werden erst beim Überfahren voll farbig —
   sonst ziehen zwei fremde Marken die Aufmerksamkeit vom Formular ab. */
.unterst{margin-top:40px;padding-top:26px;border-top:1px solid var(--g200)}
/* Die Logos teilen sich die Zeile nach ihrem Seitenverhältnis auf — das
   steht als flex-Wert am Link. Dadurch sind sie gleich hoch und füllen
   die Breite gemeinsam aus, unabhängig von der Spaltenbreite.
   Bewusst in Farbe: Entgraut wird das Logo von I+D Campus unlesbar, sein
   helles Grün verblasst zu fast weissem Grau. */
.unterst .logos{display:flex;align-items:center;gap:44px;margin-top:18px;padding-right:24px}
.unterst .logos a{display:block;min-width:0;transition:opacity .2s}
.unterst .logos a:hover{opacity:.75}
.unterst .logos img{width:100%;height:auto;display:block}
/* Zweite Zeile: eine sehr breite, flache Wortmarke über die ganze
   Spaltenbreite. Neben den beiden oberen Logos wäre sie so schmal,
   dass die Schrift nicht mehr lesbar bliebe.                          */
.unterst .logos.breit{margin-top:46px;gap:0}
.unterst .logos.breit a{flex:1 1 100%}

/* ---------- Formular ---------- */
.grid{display:grid;grid-template-columns:1.5fr 1fr;gap:0;border-top:1px solid var(--ink)}
.form{padding:44px 48px 48px 0;border-right:1px solid var(--g200);scroll-margin-top:80px}
.form h2{font-weight:900;font-size:26px;letter-spacing:-.02em;margin-bottom:6px}
.form .hint{font-size:15px;color:var(--g500);margin-bottom:28px}
.form .msg{margin:14px 0 28px;padding:16px 18px;font-size:15px;line-height:1.55}
.form .msg.ok{background:var(--tint);border-left:3px solid var(--red);color:var(--ink)}
.form .msg.err{background:var(--g50);border-left:3px solid var(--g400);color:var(--g700)}
.form .msg a{color:var(--red);font-weight:700}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field.full{grid-column:1/-1}
.field label{display:block;font-size:14px;color:var(--g500);margin-bottom:7px}
.field input,.field textarea{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--w);border:1px solid var(--g300);border-radius:0;padding:12px 14px;transition:border-color .15s,box-shadow .15s}
.field textarea{resize:vertical;min-height:120px;line-height:1.5}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(172,20,36,.15)}
.field input::placeholder,.field textarea::placeholder{color:var(--g400)}
.chan{display:flex;gap:0;border:1px solid var(--g300);width:fit-content;flex-wrap:wrap}
.chan label{margin:0;cursor:pointer;font-size:15px;color:var(--g700);border-right:1px solid var(--g300);user-select:none}
.chan label:last-child{border-right:0}
/* Breite und Höhe fest, sonst erben die Radios .field input{width:100%}.
   Absolut positioniert bezieht sich 100% auf den Viewport, nicht auf das
   Label — das schob die Seite am Handy über die Bildschirmbreite hinaus. */
.chan input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
/* Markierung am <span> statt am <label>: der Geschwisterselektor
   input:checked + span wirkt gleich, kommt aber ohne :has() aus und
   funktioniert damit auch in älteren Browsern. Deshalb liegt das
   Innenabstand am span — sonst bliebe die rote Fläche zu klein.       */
.chan label span{display:block;padding:11px 22px;transition:background .15s,color .15s}
.chan input:checked + span{background:var(--red);color:#fff}
.submit{margin-top:8px;font-family:var(--sans);font-weight:700;font-size:16px;background:var(--red);color:#fff;border:0;border-radius:0;padding:15px 30px;cursor:pointer;transition:background .15s}
.submit:hover{background:var(--red-h)}
.form .legal{margin-top:16px;font-size:13px;color:var(--g400);line-height:1.5}
.form .legal a{color:var(--g500);text-decoration:underline}
.form .legal a:hover{color:var(--red)}

/* ---------- Direktkontakt ---------- */
.side{padding:44px 0 48px 44px}
.side .e{font-weight:700;font-size:15px;color:var(--red);margin-bottom:18px}
.side .ch{display:block;padding:20px 0;border-top:1px solid var(--g200)}
.side .ch:first-of-type{border-top:0;padding-top:0}
.side .ch .l{display:block;font-size:13px;color:var(--g500);margin-bottom:5px}
.side .ch .v{display:block;font-weight:700;font-size:21px;letter-spacing:-.01em}
.side .ch:hover .v{color:var(--red)}
.side .soc{margin-top:26px;padding-top:22px;border-top:1px solid var(--g200);display:flex;flex-wrap:wrap;gap:14px}
.side .soc a{font-size:14px;color:var(--g500)}
.side .soc a:hover{color:var(--red)}

/* ---------- Zitat ---------- *
   Auf Weiss statt auf dunklem Grund: der Footer ist gleich darunter,
   zwei dunkle Flächen hintereinander wirken wie ein Block.              */
.qband{background:var(--w);color:var(--ink);margin-top:72px}
.qband .in{max-width:1240px;margin:0 auto;padding:0 44px 76px}
.qband blockquote{font-family:var(--ultra);font-weight:900;font-size:clamp(24px,3.2vw,40px);line-height:1.12;letter-spacing:-.01em;max-width:900px;border-top:2px solid var(--ink);padding-top:34px}
.qband blockquote .r{color:var(--red)}
.qband .src{display:block;margin-top:22px;font-size:14px;color:var(--g500);font-family:var(--mono);font-weight:400}

@media(max-width:900px){
  .wrap,.qband .in{padding-left:24px;padding-right:24px}
  .grid{grid-template-columns:1fr}
  .form{padding:32px 0 36px;border-right:0;border-bottom:1px solid var(--g200)}
  .frow{grid-template-columns:1fr;gap:0}
  .side{padding:32px 0 8px}
  .locs{grid-template-columns:1fr}
  .loc .sh{flex-direction:column;align-items:flex-start;gap:6px}
  /* Am Handy stehen die Logos eingerückt: über die ganze Spaltenbreite
     wirken sie neben dem schmalen Text zu wuchtig. Überschrift und
     Trennlinie bleiben bündig zum übrigen Seitenraster.               */
  .unterst .logos{padding:0 26px;margin-top:60px}
  .unterst .logos.breit{margin-top:38px}
}