/* Logo-Studio: Werkzeugleiste, Großansicht und Anwendungsbeispiele */
.lgx-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.lgx-gruppe { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: #eef2ef; border: 1px solid #e1e7e4; }
#library.lg-library .lgx-gruppe button { height: 32px; min-width: 34px; padding: 0 9px; border: 0; border-radius: 9px; background: transparent; color: #34474e; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
#library.lg-library .lgx-gruppe button:hover:not(:disabled) { background: #fff; }
#library.lg-library .lgx-gruppe button:disabled { opacity: .35; cursor: default; }
#library.lg-library .lgx-gruppe button[aria-pressed="true"] { background: #fff; color: #14323a; box-shadow: 0 2px 8px #18302e1c; }
#library.lg-library .lgx-gross-knopf { margin-left: auto; height: 38px; padding: 0 14px; border-radius: 11px; border: 0; background: linear-gradient(135deg, #2a9079, #1d6d5e); color: #fff; font-size: 13px; font-weight: 800; box-shadow: 0 8px 18px -10px #1d6d5ecc; }
#library.lg-library .lgx-gross-knopf:hover { background: linear-gradient(135deg, #1f7a68, #14323a); }
.lgx-hinter span { font-size: 12px; }
.lgx-muster { width: 16px; height: 16px; border-radius: 5px; border: 1px solid #14323a26; display: inline-block; }
.lgx-m-hell { background: #fff; } .lgx-m-dunkel { background: #14323a; } .lgx-m-marke { background: linear-gradient(135deg, #2a9079, #1d6d5e); }
.lgx-m-raster, .lgx-h-raster .lg-card { background-color: #fff !important; background-image: conic-gradient(#e6ebe8 25%, #fff 0 50%, #e6ebe8 0 75%, #fff 0) !important; background-size: 14px 14px !important; }
#library.lg-library .lgx-zoom { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #34474e; }
#library.lg-library .lgx-zoom input { width: 120px; margin: 0; }
#library.lg-library .lgx-zoom output { min-width: 44px; color: #1d6d5e; }

/* ---------- Großansicht: Logo-Studio füllt das Fenster ---------- */
@media (min-width: 900px) {
  body.lgx-gross-an #library.lg-library.lgx { position: fixed !important; inset: 12px !important; z-index: 2147482000 !important; width: auto !important; max-width: none !important; height: auto !important; max-height: none !important;
    display: grid !important; grid-template-columns: minmax(0, 1.45fr) minmax(380px, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; padding: 0 !important; overflow: hidden !important; transform: none !important; visibility: visible !important; opacity: 1 !important;
    border-radius: 26px; background: #eef3f0 !important; border: 1px solid #fff; box-shadow: 0 0 0 100vmax #0b18208c, 0 40px 100px #0b182066; animation: lgx-auf .35s cubic-bezier(.2, .8, .2, 1); isolation: isolate; }
  @keyframes lgx-auf { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
  body.lgx-gross-an #library.lgx::before { content: ""; position: absolute; inset: -20%; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .75;
    background: radial-gradient(26% 30% at 14% 18%, #2f9a83aa, transparent 70%), radial-gradient(24% 30% at 60% 10%, #e7b878aa, transparent 70%), radial-gradient(30% 34% at 30% 92%, #6aa7c788, transparent 70%); }
  #library.lgx .lgx-kopf { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 20px; padding: 18px 24px 14px; background: #ffffffa6; border-bottom: 1px solid #fff; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  #library.lgx > :not(.lgx-kopf):not(.lgx-links):not(.lgx-rechts) { display: none !important; }
  #library.lgx .lgx-kopf .lg-head { padding: 0; }
  #library.lgx .lgx-kopf .lg-head p { max-width: 640px; }
  #library.lgx .lgx-kopf .lg-modes { margin: 0; min-width: 380px; }
  #library.lgx .lgx-kopf .lgx-leiste { grid-column: 1 / -1; margin: 0; }
  #library.lgx .lgx-links { min-height: 0; overflow-y: auto; padding: 20px 24px 28px; display: grid; align-content: start; gap: 18px; }
  #library.lgx .lgx-rechts { min-height: 0; overflow-y: auto; padding: 8px 24px 0; background: #ffffffc7; border-left: 1px solid #fff; }
  #library.lgx .lgx-rechts .lg-actions { bottom: 0; margin: 0 -24px; padding: 14px 24px 16px; background: linear-gradient(#ffffff00, #fff 30%); }
  /* Große Vorschau */
  #library.lgx .lg-preview { position: static; margin: 0; padding: 0; background: none; }
  #library.lgx .lg-stage { grid-template-columns: 1fr 1fr; gap: 14px; }
  #library.lgx .lg-card { min-height: clamp(220px, 34vh, 380px); border-radius: 22px; padding: 28px; box-shadow: 0 24px 50px -32px #14323a99; transition: background .3s; }
  #library.lgx .lg-card svg, #library.lgx .lg-card img { max-height: calc(150px * var(--lgx-zoom, 1)); max-width: calc(100% * min(1, var(--lgx-zoom, 1))); transition: max-height .2s; }
  #library.lgx .lgx-h-dunkel .lg-light { background: #14323a; border-color: #14323a; }
  #library.lgx .lgx-h-marke .lg-light { background: var(--lgx-marke, #1d5c55); border-color: transparent; }
  #library.lgx .lgx-h-marke .lg-dark { background: #fff; }
  /* Rechts: Werkzeuge großzügiger */
  #library.lgx .lg-sugg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #library.lgx .lg-icons { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
  #library.lgx .lg-sec { padding: 16px 0; }
}
/* In der Großansicht Atlas und Hinweise ausblenden, „Alle Vorschläge“ besser lesbar */
@media (min-width: 900px) { body.lgx-gross-an :is(#atKnopf, #atEinladung) { display: none !important; } }
#library.lg-library .lg-gallery-open small { opacity: 1; color: #d7e8e2; }
@media (max-width: 899px) { #library.lg-library .lgx-gross-knopf, #library.lg-library .lgx-hinter, #library.lg-library .lgx-zoom { display: none; } }

/* ---------- Anwendungsbeispiele ---------- */
.lgx-anw-box h3 { margin: 0 0 12px !important; font-size: 15px !important; color: #14323a; }
.lgx-anw { --lgx-farbe: #1d5c55; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.lgx-anw figure { margin: 0; display: grid; gap: 8px; align-content: start; padding: 14px; border-radius: 18px; background: #ffffffc7; border: 1px solid #fff; box-shadow: 0 16px 34px -28px #14323a99; min-width: 0; animation: lgx-rein .45s cubic-bezier(.2, .8, .2, 1) both; }
.lgx-anw figure:nth-child(2) { animation-delay: .05s; } .lgx-anw figure:nth-child(3) { animation-delay: .1s; } .lgx-anw figure:nth-child(4) { animation-delay: .15s; } .lgx-anw figure:nth-child(5) { animation-delay: .2s; }
@keyframes lgx-rein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lgx-anw figcaption { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #1d6d5e; }
.lgx-anw-web { grid-column: span 6; } .lgx-anw-karte { grid-column: span 3; } .lgx-anw-social { grid-column: span 3; } .lgx-anw-app { grid-column: span 3; } .lgx-anw-brief { grid-column: span 3; }
.lgx-anw svg, .lgx-anw img { display: block; max-width: 100%; }
/* Visitenkarte: Vorder- und Rückseite */
.lgx-vk { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lgx-vk > div { aspect-ratio: 85 / 55; border-radius: 10px; box-shadow: 0 10px 24px -14px #14323a99; overflow: hidden; position: relative; }
.lgx-vk-vorne { background: #fff; display: grid; place-items: center; padding: 12%; border: 1px solid #e1e7e4; }
.lgx-vk-logo svg, .lgx-vk-logo img { height: 44px; width: auto; max-width: 100%; }
.lgx-vk-hinten { background: var(--lgx-farbe); color: #fff; display: grid; align-content: center; gap: 2px; padding: 10% 12%; }
.lgx-vk-zeichen { position: absolute; right: 10%; top: 12%; width: 28px; height: 28px; }
.lgx-vk-zeichen svg, .lgx-vk-zeichen img { width: 28px; height: 28px; filter: drop-shadow(0 2px 4px #0003); }
.lgx-vk-hinten b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lgx-vk-hinten small { font-size: 9.5px; opacity: .85; }
.lgx-vk-hinten i { display: block; height: 4px; width: 60%; border-radius: 2px; background: #ffffff59; margin-top: 4px; } .lgx-vk-hinten i + i { width: 42%; }
/* Social Media */
.lgx-so { position: relative; display: grid; justify-items: start; gap: 2px; padding: 0 12px 12px; border-radius: 12px; background: #fff; border: 1px solid #e1e7e4; overflow: hidden; }
.lgx-so-band { justify-self: stretch; height: 54px; margin: 0 -12px; background: linear-gradient(120deg, var(--lgx-farbe), #e7b878); }
.lgx-so-bild { width: 64px; height: 64px; margin-top: -32px; border-radius: 50%; background: #fff; border: 3px solid #fff; box-shadow: 0 6px 16px -6px #14323a80; display: grid; place-items: center; overflow: hidden; }
.lgx-so-bild svg, .lgx-so-bild img { width: 52px; height: 52px; object-fit: contain; }
.lgx-so b { font-size: 13.5px; color: #14323a; margin-top: 4px; } .lgx-so small { font-size: 11.5px; color: #536469; }
.lgx-so-knopf { position: absolute; right: 12px; top: 62px; padding: 5px 12px; border-radius: 999px; background: var(--lgx-farbe); color: #fff; font-size: 11.5px; font-weight: 800; }
/* App-Symbol */
.lgx-app { display: flex; align-items: flex-end; gap: 14px; padding: 14px; border-radius: 12px; background: linear-gradient(140deg, #dfe9e5, #f3ede2); }
.lgx-app-icon { width: 56px; height: 56px; border-radius: 15px; background: #fff; display: grid; place-items: center; box-shadow: 0 8px 18px -8px #14323a80; overflow: hidden; }
.lgx-app-icon svg, .lgx-app-icon img { width: 80%; height: 80%; object-fit: contain; }
.lgx-app-gross { width: 72px; height: 72px; border-radius: 18px; } .lgx-app-klein { width: 40px; height: 40px; border-radius: 11px; }
.lgx-app-fav { width: 22px; height: 22px; border-radius: 5px; background: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px #14323a40; }
.lgx-app-fav svg, .lgx-app-fav img { width: 16px; height: 16px; }
/* Briefkopf */
.lgx-brief { aspect-ratio: 1 / 1.1; max-height: 210px; display: grid; align-content: start; gap: 7px; padding: 14px 16px; border-radius: 6px; background: #fff; border: 1px solid #e1e7e4; box-shadow: 0 10px 24px -16px #14323a80; position: relative; overflow: hidden; }
.lgx-brief-logo { justify-self: end; margin-bottom: 10px; } .lgx-brief-logo svg, .lgx-brief-logo img { height: 28px; width: auto; max-width: 100%; }
.lgx-brief i { display: block; height: 4px; border-radius: 2px; background: #e3e9e6; } .lgx-brief .lgx-kurz { width: 55%; }
.lgx-brief em { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--lgx-farbe); }
@media (max-width: 1250px) { .lgx-anw-karte, .lgx-anw-social, .lgx-anw-app, .lgx-anw-brief { grid-column: span 6; } }
@media (prefers-reduced-motion: reduce) { .lgx-anw figure, body.lgx-gross-an #library.lg-library.lgx { animation: none; } }

/* ---------- Logo aus Ihrem Bild (KI) ---------- */
.lgk { position: relative; overflow: hidden; display: grid; gap: 12px; margin: 4px 0 6px; padding: 16px; border-radius: 18px; border: 1px solid #fff; background: linear-gradient(140deg, #eaf5f1, #fbf3e6); box-shadow: 0 16px 34px -26px #14323a8c; }
.lgk::before { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -90px; border-radius: 50%; background: radial-gradient(circle, #e7b87866, transparent 70%); animation: lgk-schweben 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes lgk-schweben { to { transform: translate(-30px, 24px) scale(1.1); } }
.lgk > * { position: relative; }
.lgk-kopf { display: flex; gap: 12px; align-items: flex-start; }
.lgk-badge { flex: none; padding: 5px 10px; border-radius: 999px; background: linear-gradient(135deg, #2a9079, #1d6d5e); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; box-shadow: 0 6px 14px -6px #1d6d5ecc; }
#library.lg-library .lgk h3 { font-size: 15px; color: #14323a; }
#library.lg-library .lgk-kopf p { margin-top: 3px; font-size: 12.5px; color: #3d5258; line-height: 1.45; }
#library.lg-library .lgk-drop { display: grid; justify-items: center; gap: 4px; padding: 20px 14px; border: 2px dashed #9cc7bb; border-radius: 14px; background: #ffffffb3; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
#library.lg-library .lgk-drop:hover, #library.lg-library .lgk-drop.lgk-ueber, #library.lg-library .lgk-drop:focus-visible { border-color: #1d6d5e; background: #fff; transform: translateY(-1px); outline: none; }
.lgk-drop span { font-size: 24px; color: #1d6d5e; } .lgk-drop b { font-size: 13.5px; color: #14323a; } .lgk-drop small { font-size: 11.5px; color: #536469; font-weight: 500; }
.lgk-bild { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: #ffffffc7; }
.lgk-bild img { width: 76px; height: 76px; object-fit: cover; border-radius: 11px; flex: none; box-shadow: 0 6px 16px -8px #14323a99; }
.lgk-bild > div { display: grid; gap: 6px; justify-items: start; } .lgk-bild b { font-size: 12px; color: #14323a; }
.lgk-farben { display: flex; gap: 5px; } .lgk-farben i { width: 22px; height: 22px; border-radius: 7px; border: 2px solid #fff; box-shadow: 0 2px 6px #14323a33; }
#library.lg-library .lgk-klein { height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid #14323a26; background: #fff; color: #14323a; font-size: 12px; font-weight: 700; }
#library.lg-library .lgk-wunsch { font-size: 12px; }
#library.lg-library .lgk-los { height: 44px; border: 0; border-radius: 13px; background: linear-gradient(135deg, #2a9079, #1d6d5e); color: #fff; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 10px 22px -12px #1d6d5ecc; transition: transform .15s, background .15s; }
#library.lg-library .lgk-los:hover:not(:disabled) { background: linear-gradient(135deg, #1f7a68, #14323a); transform: translateY(-1px); }
#library.lg-library .lgk-los:disabled { opacity: .6; cursor: default; }
.lgk-dreh { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ffffff59; border-top-color: #fff; animation: lgk-dreh .8s linear infinite; }
@keyframes lgk-dreh { to { transform: rotate(360deg); } }
#library.lg-library .lgk-hinweis { font-size: 11.5px; color: #45585e; line-height: 1.45; } .lgk-hinweis a { color: #16564b; font-weight: 700; }
#library.lg-library .lgk-fehler { font-size: 12.5px; padding: 8px 10px; border-radius: 10px; background: #fdecec; color: #9b2c2c; }
.lgk-ergebnis { display: grid; gap: 10px; }
.lgk-ergebnis-kopf b { font-size: 13.5px; color: #14323a; } #library.lg-library .lgk-ergebnis-kopf p { font-size: 12.5px; color: #3d5258; margin-top: 2px; }
.lgk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#library.lgx .lgk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#library.lg-library .lgk-karte { position: relative; display: grid; gap: 4px; justify-items: center; padding: 12px 10px 10px; border-radius: 14px; border: 1px solid #fff; background: #ffffffe0; text-align: center; animation: lgk-rein .4s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); transition: transform .15s, box-shadow .15s, border-color .15s; }
@keyframes lgk-rein { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
#library.lg-library .lgk-karte:hover { transform: translateY(-3px); border-color: #1d6d5e; box-shadow: 0 14px 30px -18px #14323a99; }
.lgk-logo { height: 62px; display: grid; place-items: center; } .lgk-logo svg { height: 50px; max-width: 100%; width: auto; }
.lgk-karte b { font-size: 12.5px; color: #14323a; } .lgk-karte small { font-size: 11px; color: #45585e; line-height: 1.35; font-weight: 500; }
.lgk-karte em { font-style: normal; font-size: 11.5px; font-weight: 800; color: #fff; background: #1d6d5e; padding: 3px 10px; border-radius: 999px; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .lgk::before, .lgk-karte, .lgk-dreh { animation: none; } }