/* TF Event Kunden-Galerie – angepasst an das Design von tfevent.de
   (Twenty Twenty-Five, Inter, kühles Off-White, Navy-Akzent). */

.tfg-body{
  --tfg-bg:#F6F8FA;
  --tfg-surface:#FFFFFF;
  --tfg-text:#1A1F27;
  --tfg-soft:#444C57;
  --tfg-muted:#5D6672;
  --tfg-navy:#3F4E63;
  --tfg-navy-dark:#26303F;
  --tfg-line:#DDE3EA;
  --tfg-line-light:#E6EAF0;
  --tfg-line-strong:#C5CDD8;
  --tfg-photo:#E4E9EF;
  --tfg-dark:#1A1F27;
  --tfg-on-dark:#F1F4F7;
  --tfg-on-dark-soft:#C3CAD4;
  --tfg-footer-link:#D5DDE8;
  --tfg-font:var(--wp--preset--font-family--inter, Inter, -apple-system, "Segoe UI", Roboto, sans-serif);

  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--tfg-bg);
  color:var(--tfg-text);
  font-family:var(--tfg-font);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv11','ss01';
}
.tfg-body *,.tfg-body *::before,.tfg-body *::after{box-sizing:border-box}
.tfg-body a{color:var(--tfg-navy)}
.tfg-body a:hover{color:var(--tfg-navy-dark)}
.tfg-body :focus-visible{outline:2px solid var(--tfg-navy);outline-offset:3px}

.tfg-skip{position:absolute;left:-9999px;top:0;background:var(--tfg-surface);padding:10px 16px;z-index:100000}
.tfg-skip:focus{left:16px;top:16px}

/* Kopfzeile wie auf der Website */
.tfg-header{background:var(--tfg-bg);border-bottom:1px solid var(--tfg-line);padding:14px 32px}
.tfg-header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.tfg-logo{display:block;line-height:0;text-decoration:none}
.tfg-logo img{display:block;width:170px;height:auto}
.tfg-logo-text{display:inline-block;line-height:1.2;font-size:20px;font-weight:800;font-style:italic;letter-spacing:-0.02em;color:var(--tfg-text)}
.tfg-header-action{margin:0}
.tfg-header-link{font-size:15px;font-weight:500;color:var(--tfg-text)!important;text-decoration:none}
.tfg-header-link:hover{color:var(--tfg-navy)!important}

/* Buttons wie auf der Website: Pill, Navy, Inter 600 */
.tfg-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:16px 30px;border-radius:999px;border:1px solid transparent;font-family:var(--tfg-font);font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.tfg-btn-primary{background:var(--tfg-navy);color:#FFFFFF!important}
.tfg-btn-primary:hover{background:var(--tfg-navy-dark);color:#FFFFFF!important}
.tfg-btn-outline{background:transparent;color:var(--tfg-text)!important;border-color:var(--tfg-line-strong)}
.tfg-btn-outline:hover{background:var(--tfg-text);color:#FFFFFF!important;border-color:var(--tfg-text)}
.tfg-btn-light{background:var(--tfg-on-dark);color:var(--tfg-text)!important}
.tfg-btn-light:hover{background:#FFFFFF;color:var(--tfg-text)!important}
.tfg-btn-sm{padding:12px 22px;font-size:15px}
.tfg-btn-block{width:100%}

/* Typografie */
.tfg-eyebrow{margin:0;font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--tfg-navy)}
.tfg-soft{color:var(--tfg-soft)}
.tfg-main{flex:1;width:100%;max-width:1264px;margin:0 auto;padding:72px 32px 96px}

/* Login- und Hinweisseite */
.tfg-panel{max-width:480px;margin:0 auto;background:var(--tfg-surface);border:1px solid var(--tfg-line);border-radius:6px;padding:48px 44px}
.tfg-panel>*{margin:0}
.tfg-panel>*+*{margin-top:16px}
.tfg-panel-title{font-family:var(--tfg-font);font-size:clamp(2rem,5vw,2.5rem);font-weight:800;letter-spacing:-0.03em;line-height:1.08;color:var(--tfg-text)}
.tfg-panel .tfg-eyebrow+.tfg-panel-title{margin-top:14px}
.tfg-form{margin-top:28px!important;display:flex;flex-direction:column}
.tfg-form label{font-size:15px;font-weight:600;margin-bottom:6px}
.tfg-form input{width:100%;margin:0 0 20px;padding:13px 16px;font:inherit;font-size:1rem;color:var(--tfg-text);background:var(--tfg-surface);border:1px solid var(--tfg-line-strong);border-radius:8px}
.tfg-form input:focus{outline:none;border-color:var(--tfg-navy);box-shadow:0 0 0 3px rgba(63,78,99,.18)}
.tfg-form .tfg-btn{margin-top:8px}
.tfg-error{padding:12px 16px;background:#FBEFEE;border:1px solid #E8BDB8;border-radius:8px;color:#8A2B22;font-size:15px;line-height:1.5}

/* Galerie-Kopf */
.tfg-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px 56px;flex-wrap:wrap;padding-bottom:40px;margin-bottom:40px;border-bottom:1px solid var(--tfg-line)}
.tfg-intro-text{max-width:640px}
.tfg-intro-text>*{margin:0}
.tfg-intro-text>*+*{margin-top:14px}
.tfg-title{font-family:var(--tfg-font);font-size:clamp(2.5rem,6vw,4rem);font-weight:800;letter-spacing:-0.035em;line-height:1.05;color:var(--tfg-text)}
.tfg-lead{font-size:19px;color:var(--tfg-soft)}
.tfg-intro-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.tfg-count{margin:0;font-size:15px;color:var(--tfg-muted);font-variant-numeric:tabular-nums}

/* Fotoraster */
.tfg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tfg-card{display:block;width:100%;padding:0;border:0;border-radius:4px;background:var(--tfg-photo);aspect-ratio:1;overflow:hidden;cursor:zoom-in}
.tfg-card img{display:block;width:100%;height:100%;object-fit:cover}
.tfg-card:hover img{opacity:.9}
/* Vorschaubilder werden per Warteschlange geladen und weich eingeblendet */
.tfg-card img.tfg-thumb{opacity:0;transition:opacity .25s ease}
.tfg-card img.tfg-thumb.is-loaded{opacity:1}
.tfg-card.is-failed{position:relative;cursor:pointer}
.tfg-card.is-failed::after{content:"Bild neu laden";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--tfg-text)}
.tfg-lightbox.is-loading .tfg-lb-stage img{opacity:.35}

.tfg-empty{max-width:560px;padding:56px 0}
.tfg-empty>*{margin:0}
.tfg-empty>*+*{margin-top:12px}
.tfg-empty h2{font-size:1.375rem;font-weight:700;letter-spacing:-0.015em;line-height:1.2}

/* Lightbox: dunkel wie die dunklen Flächen der Website */
.tfg-lightbox{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;background:var(--tfg-dark);color:var(--tfg-on-dark)}
.tfg-lightbox[hidden]{display:none}
.tfg-lb-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px}
.tfg-lb-counter{font-size:15px;color:var(--tfg-on-dark-soft);font-variant-numeric:tabular-nums}
.tfg-lb-tools{display:flex;align-items:center;gap:12px}
.tfg-lb-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:16px;padding:0 24px 24px}
.tfg-lb-stage img{display:block;max-width:100%;max-height:100%;min-width:0;object-fit:contain;border-radius:2px}
.tfg-lb-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid rgba(241,244,247,.22);border-radius:999px;background:transparent;color:var(--tfg-on-dark);cursor:pointer;transition:background-color .15s ease}
.tfg-lb-btn:hover{background:rgba(241,244,247,.12)}
.tfg-lightbox :focus-visible{outline-color:var(--tfg-on-dark)}

/* Gemeinsame Login-Seite: Auswahl bei mehreren Galerien */
.tfg-header-action{display:flex;align-items:center;gap:20px}
.tfg-header-action form{margin:0}
.tfg-chooser-list{list-style:none;margin:24px 0;padding:0;display:grid;gap:10px}
.tfg-chooser-item{display:block;padding:16px 20px;border:1px solid var(--tfg-line-strong);border-radius:6px;color:var(--tfg-text);text-decoration:none;font-weight:600;transition:border-color .15s ease,background-color .15s ease}
.tfg-chooser-item:hover{border-color:var(--tfg-navy);color:var(--tfg-navy)}
.tfg-back{margin-top:20px}

/* Fußzeile wie auf der Website */
.tfg-footer{background:var(--tfg-dark);color:var(--tfg-on-dark-soft);font-size:14px;padding:36px 32px}
.tfg-footer-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap}
.tfg-footer p{margin:0}
.tfg-footer-links{display:flex;gap:24px;flex-wrap:wrap}
.tfg-footer a{color:var(--tfg-footer-link)}
.tfg-footer a:hover{color:#FFFFFF}

@media (max-width:781px){
  .tfg-header{padding:12px 20px}
  .tfg-logo img{width:140px}
  .tfg-main{padding:48px 20px 64px}
  .tfg-panel{padding:36px 24px}
  .tfg-intro{padding-bottom:28px;margin-bottom:24px}
  .tfg-intro-actions{width:100%}
  .tfg-intro-actions .tfg-btn{width:100%}
  .tfg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .tfg-footer{padding:28px 20px}
  .tfg-lb-bar{padding:12px 12px}
  .tfg-lb-stage{position:relative;padding:0 0 12px;gap:0}
  .tfg-lb-stage .tfg-prev,.tfg-lb-stage .tfg-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(26,31,39,.55);border-color:rgba(241,244,247,.18)}
  .tfg-lb-stage .tfg-prev{left:8px}
  .tfg-lb-stage .tfg-next{right:8px}
}
@media (prefers-reduced-motion:reduce){
  .tfg-btn,.tfg-lb-btn,.tfg-card img.tfg-thumb{transition:none}
}