/* Fachberatung-IT Referenzen, isolierte Gestaltung */
.referenzen-intro, .referenzen-projekt { padding-block: clamp(3rem,6vw,6rem); }
.referenzen-intro { background:#fff; }
.referenzen-heading { max-width:840px; }
.referenzen-heading h2 { margin: .6rem 0 1rem; }
.referenzen-heading p { max-width:760px; font-size:clamp(1rem,1.4vw,1.15rem); line-height:1.8; color:#526073; }
.referenzen-projekt { background:#f5f7fa; }
.referenzen-projekt:nth-of-type(even) { background:#fff; }
.referenzen-projekt__layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(300px,1fr); align-items:center; gap:clamp(2rem,5vw,5rem); }
.referenzen-projekt__body { min-width:0; }
.referenzen-projekt__meta { text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; font-weight:700; color:#59738a; margin:0 0 .75rem; }
.referenzen-projekt__body h2 { margin:0 0 1rem; }
.referenzen-projekt__body h3 { font-size:1.02rem; margin:1.45rem 0 .35rem; }
.referenzen-projekt__body p,.referenzen-projekt__body li { line-height:1.75; }
.referenzen-projekt__lead { font-size:1.1rem; color:#405369; }
.referenzen-projekt__body ul { padding-left:1.4rem; }
.referenzen-projekt__link { margin-top:1.5rem; }
.referenzen-projekt__link a { color:inherit; text-decoration:none; border-bottom:2px solid #d8b029; padding-bottom:3px; }
.referenzen-projekt__media { margin:0; }
.referenzen-projekt__media img { display:block; width:100%; aspect-ratio:16/10; object-fit:contain; background:#e8edf2; border:1px solid #d9e1e9; border-radius:14px; box-shadow:0 16px 32px rgba(31,45,60,.08); }
.referenzen-projekt__media figcaption { margin-top:.65rem; font-size:.75rem; color:#748296; }
@media(min-width:900px){.referenzen-projekt:nth-of-type(odd) .referenzen-projekt__media {grid-column:1;grid-row:1}.referenzen-projekt:nth-of-type(odd) .referenzen-projekt__body {grid-column:2;grid-row:1}}
@media(max-width:899px){.referenzen-projekt__layout{grid-template-columns:1fr}.referenzen-projekt__media{max-width:720px}}

/* ------------------------------------------------------------------
   Detail-Layout: Kopf (Text + Screenshot) und Kachelraster
   Verwendet von: includes/fastenSylt, includes/landmarktMeise
   Modifier: --gross (Hauptkachel, dunkel), --breit (volle Breite)
   ------------------------------------------------------------------ */

/* Kopf */
.referenzen-detail__kopf { display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.referenzen-detail__text { min-width:0; }

.referenzen-detail__tags { list-style:none; margin:0 0 1.25rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.referenzen-detail__tags li { margin:0; padding:.35rem .85rem; font-size:.82rem; font-weight:600; line-height:1.3; color:#2e5c8a; background:#fff; border:1px solid #d9e1e9; border-radius:999px; }

.referenzen-detail__text h2 { margin:0 0 1rem; }
.referenzen-detail__lead { margin:0; max-width:36rem; font-size:clamp(1.05rem,1.4vw,1.15rem); line-height:1.75; color:#405369; }

.referenzen-detail__link { margin:1.75rem 0 0; }
.referenzen-detail__link a { color:inherit; font-weight:600; text-decoration:none; border-bottom:2px solid #d8b029; padding-bottom:3px; }
.referenzen-detail__link a:hover { border-bottom-color:#2e5c8a; }
.referenzen-detail__link a:focus-visible { outline:2px solid #2e5c8a; outline-offset:4px; border-radius:2px; }

.referenzen-detail__beziehung { margin:1.5rem 0 0; max-width:34rem; padding-left:1rem; border-left:3px solid #d8b029; line-height:1.6; color:#405369; }
.referenzen-detail__beziehung strong { color:#1d3f63; }

/* Screenshot im Browserrahmen */
.referenzen-detail__bild { margin:0; min-width:0; background:#fff; border:1px solid #d9e1e9; border-radius:16px; overflow:hidden; box-shadow:0 22px 44px rgba(29,63,99,.10); }
.referenzen-detail__browser { display:flex; align-items:center; gap:.4rem; padding:.6rem .9rem; background:#eaf0f6; border-bottom:1px solid #d9e1e9; }
.referenzen-detail__punkt { flex:none; width:.55rem; height:.55rem; border-radius:50%; background:#b7c6d5; }
.referenzen-detail__adresse { margin-left:.6rem; padding:.15rem .7rem; font-size:.72rem; line-height:1.4; color:#59738a; background:#fff; border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.referenzen-detail__bild img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:top center; background:#e8edf2; }

/* Kachelraster */
.referenzen-detail__raster { display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; margin-top:clamp(2.75rem,6vw,4.5rem); }

.referenzen-detail__kachel { min-width:0; padding:clamp(1.4rem,2.4vw,1.9rem); background:#fff; border:1px solid #d9e1e9; border-radius:12px; }
.referenzen-detail__kachel h3 { margin:.9rem 0 .5rem; font-size:1.05rem; line-height:1.35; }
.referenzen-detail__kachel p { margin:0; line-height:1.7; color:#526073; }
.referenzen-detail__icon { display:block; width:28px; height:28px; color:#2e5c8a; }

/* Hauptkachel (Verwaltungssoftware) */
.referenzen-projekt .referenzen-detail__kachel--gross { background:#1d3f63; border-color:#1d3f63; border-radius:18px; color:#fff; }
.referenzen-projekt .referenzen-detail__kachel--gross h3 { color:#fff; font-size:clamp(1.15rem,1.6vw,1.3rem); }
.referenzen-projekt .referenzen-detail__kachel--gross p { color:rgba(255,255,255,.82); }
.referenzen-projekt .referenzen-detail__kachel--gross .referenzen-detail__icon { color:#d8b029; }

.referenzen-detail__liste { list-style:none; margin:1.25rem 0 0; padding:0; display:grid; gap:.7rem 2rem; }
.referenzen-detail__liste li { position:relative; margin:0; padding-left:1.75rem; line-height:1.55; color:#fff; }
.referenzen-detail__liste li::before { content:""; position:absolute; left:0; top:.2em; width:1.05rem; height:1.05rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8b029' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") no-repeat center / contain; }
.referenzen-detail__kein-umbruch { white-space:nowrap; }

@media (min-width:640px){
  .referenzen-detail__raster { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .referenzen-detail__kachel--gross { grid-column:1 / -1; grid-row:1; }
  .referenzen-detail__liste { grid-template-columns:repeat(2,minmax(0,1fr)); }

  /* Breite Kachel über die volle Rasterbreite, Symbol links neben dem Text */
  .referenzen-detail__kachel--breit { grid-column:1 / -1; display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:1.1rem; align-items:start; }
  .referenzen-detail__kachel--breit .referenzen-detail__icon { grid-row:1 / span 2; }
  .referenzen-detail__kachel--breit h3 { margin-top:.15rem; }
  .referenzen-detail__kachel--breit p { max-width:46rem; }
}
@media (min-width:900px){
  .referenzen-detail__kopf { grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); }
}
@media (min-width:1000px){
  .referenzen-detail__raster { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .referenzen-detail__kachel--gross { grid-column:1 / span 2; grid-row:1; }
}

/* ------------------------------------------------------------------
   Eigene Entwicklung: Info-Bildschirm (dunkler Abschnitt)
   Verwendet von: includes/infoBildschirm
   ------------------------------------------------------------------ */
.referenzen-produkt { padding-block:clamp(3.5rem,7vw,7rem); background:#1d3f63; color:#fff; }
.referenzen-produkt__layout { display:grid; gap:clamp(2.5rem,5vw,5rem); align-items:center; }
.referenzen-produkt__text { min-width:0; }
.referenzen-produkt__art { margin:0 0 .75rem; font-size:.9rem; font-weight:600; color:#d8b029; }
.referenzen-produkt h2 { margin:0 0 1rem; color:#fff; }
.referenzen-produkt__lead { margin:0; max-width:34rem; font-size:clamp(1.05rem,1.4vw,1.15rem); line-height:1.75; color:rgba(255,255,255,.85); }
.referenzen-produkt__einsatz-titel { margin:2rem 0 .75rem; font-size:.95rem; color:#fff; }
.referenzen-produkt__einsatz { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.referenzen-produkt__einsatz li { margin:0; padding:.4rem .9rem; font-size:.88rem; font-weight:600; line-height:1.3; color:#fff; border:1px solid rgba(255,255,255,.32); border-radius:999px; }

/* Schema: Bildschirm mit wechselnden Präsentationen */
.referenzen-produkt__grafik { margin:0; min-width:0; }
.referenzen-produkt__monitor { position:relative; aspect-ratio:16/9; border:10px solid #0d1f33; border-radius:14px; background:#0d1f33; overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.28); }
.referenzen-produkt__folie { position:absolute; inset:0; display:block; width:100%; height:100%; opacity:0; animation:referenzen-wechsel 9s infinite both; }
.referenzen-produkt__folie:nth-child(1) { opacity:1; }
.referenzen-produkt__folie:nth-child(2) { animation-delay:3s; }
.referenzen-produkt__folie:nth-child(3) { animation-delay:6s; }
.referenzen-produkt__fuss { width:22%; height:14px; margin:0 auto; background:#0d1f33; border-radius:0 0 6px 6px; }

.referenzen-produkt__zeitplan { list-style:none; margin:1.5rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; }
.referenzen-produkt__zeitplan li { position:relative; margin:0; padding-top:.75rem; border-top:3px solid rgba(255,255,255,.18); font-size:.82rem; line-height:1.4; color:rgba(255,255,255,.7); }
.referenzen-produkt__zeitplan li::before { content:""; position:absolute; left:0; right:0; top:-3px; height:3px; background:#d8b029; opacity:0; animation:referenzen-wechsel 9s infinite both; }
.referenzen-produkt__zeitplan li:nth-child(1)::before { opacity:1; }
.referenzen-produkt__zeitplan li:nth-child(2)::before { animation-delay:3s; }
.referenzen-produkt__zeitplan li:nth-child(3)::before { animation-delay:6s; }
.referenzen-produkt__zeitplan strong { display:block; font-weight:600; color:#fff; }

@keyframes referenzen-wechsel {
  0%   { opacity:0; }
  4%   { opacity:1; }
  33%  { opacity:1; }
  37%  { opacity:0; }
  100% { opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .referenzen-produkt__folie,
  .referenzen-produkt__zeitplan li::before { animation:none; }
}
@media (min-width:900px){
  .referenzen-produkt__layout { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
}

/* ------------------------------------------------------------------
   Weitere Projekte (allgemeiner Hinweis ohne Einzelkunden)
   Verwendet von: includes/weitereProjekte
   ------------------------------------------------------------------ */
.referenzen-weitere { padding-block:clamp(3rem,6vw,6rem); background:#fff; }
.referenzen-weitere__layout { display:grid; gap:1rem clamp(2rem,5vw,5rem); }
.referenzen-weitere h2 { margin:0; }
.referenzen-weitere__text { min-width:0; max-width:40rem; }
.referenzen-weitere__text p { margin:0; font-size:clamp(1.02rem,1.3vw,1.1rem); line-height:1.75; color:#405369; }
.referenzen-weitere__tags { list-style:none; margin:1.25rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem; }
.referenzen-weitere__tags li { margin:0; padding:.35rem .85rem; font-size:.82rem; font-weight:600; line-height:1.3; color:#2e5c8a; background:#fff; border:1px solid #d9e1e9; border-radius:999px; }
@media (min-width:800px){
  .referenzen-weitere__layout { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:start; }
}